百度地图定位
百度地图定位
<div class="map">
<img src="/Application/Home/View/default/pages/resource/images/map.jpg" width="490px;"height="320px;" />
引用百度地图API
<style type="text/css">
html,body{margin:0;padding:0;}
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script><script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.1&ak=&services=true&t=20130716024058"></script><link rel="stylesheet" type="text/css" href="http://api.map.baidu.com/res/11/bmap.css">
百度地图容器
<div style="width: 1349px; height: 202px; border: 1px solid rgb(204, 204, 204); margin: 0px auto; overflow: hidden; position: relative; z-index: 0; color: rgb(0, 0, 0); text-align: left; background-image: url("http://api.map.baidu.com/images/bg.png");" id="dituContent"><div id="platform" style="overflow: visible; position: absolute; z-index: 0; left: 0px; top: 0px; cursor: url("http://api.map.baidu.com/images/openhand.cur") 8 8, default;"><div id="mask" class=" BMap_mask" style="position: absolute; left: 0px; top: 0px; z-index: 9; overflow: hidden; -webkit-user-select: none; width: 490px; height: 320px;"></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 200;"><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 800;"></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 700;"><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 23px; height: 25px; left: 235px; top: 135px; z-index: -8172866; background: url("http://api.map.baidu.com/images/blank.gif");" title=""></span></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 600;"></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 500;"></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 400;"><span class="BMap_Marker" unselectable="on" style="position: absolute; padding: 0px; margin: 0px; border: 0px; width: 0px; height: 0px; left: 245px; top: 160px; z-index: -8172866;"><div style="position: absolute; margin: 0px; padding: 0px; width: 23px; height: 25px; left: -10px; top: -25px; overflow: hidden;"><img src="http://api.map.baidu.com/images/marker_red.png" style="border:none;left:0px; top:0px; position:absolute;"></div></span></div><div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 200;"></div></div><div style="position: absolute; z-index: -1; left: 245px; top: 160px;"><img src="http://online3.map.bdimg.com/tile/?qt=tile&x=26687&y=9696&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -425px; top: -366px;"><img src="http://online3.map.bdimg.com/tile/?qt=tile&x=26688&y=9695&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -169px; top: -110px;"><img src="http://online3.map.bdimg.com/tile/?qt=tile&x=26689&y=9694&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: 87px; top: 146px;"><img src="http://online2.map.bdimg.com/tile/?qt=tile&x=26687&y=9695&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -425px; top: -110px;"><img src="http://online2.map.bdimg.com/tile/?qt=tile&x=26688&y=9694&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -169px; top: 146px;"><img src="http://online4.map.bdimg.com/tile/?qt=tile&x=26689&y=9695&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: 87px; top: -110px;"><img src="http://online4.map.bdimg.com/tile/?qt=tile&x=26688&y=9696&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -169px; top: -366px;"><img src="http://online1.map.bdimg.com/tile/?qt=tile&x=26687&y=9694&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: -425px; top: 146px;"><img src="http://online0.map.bdimg.com/tile/?qt=tile&x=26689&y=9696&z=17&styles=pl&udt=20140928" style="position: absolute; border: none; width: 256px; height: 256px; left: 87px; top: -366px;"></div></div><div id="zoomer" style="position:absolute;z-index:0;top:0px;left:0px;overflow:hidden;visibility:hidden;cursor:url(http://api.map.baidu.com/images/openhand.cur) 8 8,default"><div class="BMap_zoomer" style="top:0;left:0;"></div><div class="BMap_zoomer" style="top:0;right:0;"></div><div class="BMap_zoomer" style="bottom:0;left:0;"></div><div class="BMap_zoomer" style="bottom:0;right:0;"></div></div><div class=" anchorBL" style="height: 32px; position: absolute; z-index: 10; bottom: 0px; right: auto; top: auto; left: 1px;"><a title="到百度地图首页" target="_blank" href="http://map.baidu.com/?sr=1" style="outline: none;"><img style="border:none;width:77px;height:32px" src="http://api.map.baidu.com/images/copyright_logo.png"></a></div><div unselectable="on" class=" BMap_cpyCtrl anchorBL" style="cursor: default; white-space: nowrap; bottom: 2px; right: auto; top: auto; left: 81px; position: absolute; z-index: 10;"><span style="-webkit-text-size-adjust:none;color:#000;background:none;line-height:15px;font:11px arial,simsun" _cid="1">© 2015 Baidu</span></div><div unselectable="on" class=" BMap_stdMpCtrl BMap_stdMpType0 BMap_noprint anchorTL" style="width: 52px; height: 226px; bottom: auto; right: auto; top: 10px; left: 10px; position: absolute; z-index: 1100;"><div class="BMap_stdMpPan"><div class="BMap_button BMap_panN" title="向上平移"></div><div class="BMap_button BMap_panW" title="向左平移"></div><div class="BMap_button BMap_panE" title="向右平移"></div><div class="BMap_button BMap_panS" title="向下平移"></div><div class="BMap_stdMpPanBg BMap_smcbg"></div></div><div class="BMap_stdMpZoom" style="height: 167px; width: 52px;"><div style="height: 167px; width: 37px;"><div class="BMap_button BMap_stdMpZoomIn" title="放大一级"><div class="BMap_smcbg"></div></div><div class="BMap_button BMap_stdMpZoomOut" title="缩小一级"><div class="BMap_smcbg"></div></div></div><div class="BMap_stdMpSlider" style="height: 133px;"><div class="BMap_stdMpSliderBgTop" style="height: 124px;"><div class="BMap_smcbg"></div></div><div class="BMap_stdMpSliderBgBot" style="top: 124px;"><div class="BMap_smcbg"></div></div><div class="BMap_stdMpSliderMask" title="放置到此级别"></div><div class="BMap_stdMpSliderBar" title="拖动缩放" style="cursor: url("http://api.map.baidu.com/images/openhand.cur") 8 8, default; top: 8px;"><div class="BMap_smcbg"></div></div></div><div class="BMap_zlHolder hvr"><div class="BMap_zlSt"><div class="BMap_smcbg"></div></div><div class="BMap_zlCity"><div class="BMap_smcbg"></div></div><div class="BMap_zlProv"><div class="BMap_smcbg"></div></div><div class="BMap_zlCountry"><div class="BMap_smcbg"></div></div></div></div></div><div unselectable="on" class=" BMap_omCtrl BMap_noprint anchorBR quad4" style="width: 15px; height: 15px; bottom: 0px; right: 0px; top: auto; left: auto; position: absolute; z-index: 10;"><div class="BMap_omOutFrame" style="width: 149px; height: 149px;"><div class="BMap_omInnFrame" style="bottom: auto; right: auto; top: 8px; left: 8px; width: 139px; height: 139px;"><div class="BMap_omMapContainer"></div><div class="BMap_omViewMv" style="cursor: url("http://api.map.baidu.com/images/openhand.cur") 8 8, default;"><div class="BMap_omViewInnFrame"><div></div></div></div></div></div><div class="BMap_omBtn BMap_omBtnClosed" style="bottom: 0px; right: 0px; top: auto; left: auto;"></div></div><div unselectable="on" class=" BMap_scaleCtrl BMap_noprint anchorBL" style="bottom: 18px; right: auto; top: auto; left: 81px; width: 72px; position: absolute; z-index: 10;"><div class="BMap_scaleTxt" unselectable="on">100 米</div><div class="BMap_scaleBar BMap_scaleHBar"><img style="border:none" src="http://api.map.baidu.com/images/mapctrls11.png"></div><div class="BMap_scaleBar BMap_scaleLBar"><img style="border:none" src="http://api.map.baidu.com/images/mapctrls11.png"></div><div class="BMap_scaleBar BMap_scaleRBar"><img style="border:none" src="http://api.map.baidu.com/images/mapctrls11.png"></div></div></div>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
}
//创建地图函数：
function createMap(){
if("122.749794,40.864335".indexOf(",")>-1){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(122.749794,40.864335);//定义一个中心点坐标
map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
if("海城米格商贸有限公司" == ""){
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "" , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
}
}
else{
var opts = {
width : 200, // 信息窗口宽度
height: 70, // 信息窗口高度
title : "海城米格商贸有限公司" , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
}
}
var infoWindow = new BMap.InfoWindow("地址：辽宁省海城市老杏花村北18米<br />电话：14704222224", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
});
}
else
{
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(105.530759, 36.206348);//定义一个中心点坐标
map.centerAndZoom(point,4);//设定地图的中心点和坐标并将地图显示在地图容器中
}
/* var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(122.749794,40.864335);//定义一个中心点坐标
map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
if("海城米格商贸有限公司" == ""){
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "" , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
}
}
else{
var opts = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "海城米格商贸有限公司" , // 信息窗口标题
enableMessage:true,//设置允许信息窗发送短息
}
}
var infoWindow = new BMap.InfoWindow("地址：辽宁省海城市老杏花村北18米中国消费服务网", opts); // 创建信息窗口对象
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow,point); //开启信息窗口
}); */
}
//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.disableDoubleClickZoom();//禁用鼠标双击放大
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:0});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}
initMap();//创建和初始化地图
</script>
</div>回复列表
回复操作