资源描述
百度地图的使用.docx
《百度地图的使用.docx》由会员分享，可在线阅读，更多相关《百度地图的使用.docx（12页珍藏版）》请在冰点文库上搜索。
XX地图的使用
XX地图使用介绍
目录
效果图：
1
代码：
1
使用方法5
修改方法5
修改初始地理坐标6
XX地图提供了丰富的查询接口，这里做一下推广，演示如何使用它
效果图：
代码：
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
XX地图API自定义地图--引用XX地图API-->
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:
12pxarial,sans-serif;overflow:
visible;padding-top:
4px;white-space:
-moz-pre-wrap;word-wrap:
break-word}
/*去除XX地图版权*/
.anchorBL{
display:
none;
}
99%s;height:
380px;border:
#cccsolid1px;"id="dituContent">
//创建和初始化地图函数：
functioninitMap（）{
createMap（）;//创建地图
setMapEvent（）;//设置地图事件
addMapControl（）;//向地图添加控件
addMarker（）;//向地图中添加marker
}
//创建地图函数：
functioncreateMap（）{
varmap=newBMap.Map（"dituContent"）;//在XX地图容器中创建一个地图
varpoint=newBMap.Point（105.945382,29.361842）;//定义一个中心点坐标
map.centerAndZoom（point,15）;//设定地图的中心点和坐标并将地图显示在地图容器中
window.map=map;//将map变量存储在全局
}
//地图事件设置函数：
functionsetMapEvent（）{
map.enableDragging（）;//启用地图拖拽事件，默认启用（可不写）
map.enableScrollWheelZoom（）;//启用地图滚轮放大缩小
map.enableDoubleClickZoom（）;//启用鼠标双击放大，默认启用（可不写）
map.enableKeyboard（）;//启用键盘上下左右键移动地图
}
//地图控件添加函数：
functionaddMapControl（）{
//向地图中添加缩放控件
varctrl_nav=newBMap.NavigationControl（{anchor:
BMAP_ANCHOR_TOP_LEFT,type:
BMAP_NAVIGATION_CONTROL_LARGE}）;
map.addControl（ctrl_nav）;
//向地图中添加缩略图控件
varctrl_ove=newBMap.OverviewMapControl（{anchor:
BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:
1}）;
map.addControl（ctrl_ove）;
//向地图中添加比例尺控件
varctrl_sca=newBMap.ScaleControl（{anchor:
BMAP_ANCHOR_BOTTOM_LEFT}）;
map.addControl（ctrl_sca）;
}
//标注点数组
//这里修改参数，title表示标题；content表示内容；point表示初始地理坐标
varmarkerArr=[{title:
"标题",content:
"内容",point:
"105.945346|29.356868",isOpen:
1,icon:
{w:
23,h:
25,l:
46,t:
21,x:
9,lb:
12}}
];
//创建marker
functionaddMarker（）{
for（vari=0;ivarjson=markerArr[i];
varp0=json.point.split（"|"）[0];
varp1=json.point.split（"|"）[1];
varpoint=newBMap.Point（p0,p1）;
variconImg=createIcon（json.icon）;
varmarker=newBMap.Marker（point,{icon:
iconImg}）;
variw=createInfoWindow（i）;
varlabel=newBMap.Label（json.title,{"offset":
newBMap.Size（json.icon.lb-json.icon.x+10,-20）}）;
marker.setLabel（label）;
map.addOverlay（marker）;
label.setStyle（{
borderColor:
"#808080",
color:
"#333",
cursor:
"pointer"
}）;
（function（）{
varindex=i;
var_iw=createInfoWindow（i）;
var_marker=marker;
_marker.addEventListener（"click",function（）{
this.openInfoWindow（_iw）;
}）;
_iw.addEventListener（"open",function（）{
_marker.getLabel（）.hide（）;
}）
_iw.addEventListener（"close",function（）{
_marker.getLabel（）.show（）;
}）
label.addEventListener（"click",function（）{
_marker.openInfoWindow（_iw）;
}）
if（!
!
json.isOpen）{
label.hide（）;
_marker.openInfoWindow（_iw）;
}
}）（）
}
}
//创建InfoWindow
functioncreateInfoWindow（i）{
varjson=markerArr[i];
variw=newBMap.InfoWindow（""+json.title+""+json.content+"
"）;