1、获取javascriptAPI服务方法,首先申请密钥(ak),才可成功载入APIJS文件。
用法例如以下:
假设须要限制区域,那么须要引入以下的js
2、设置样式,冲满全屏,弹出窗体的样式
body,html,#l-map{width:100%;height:100%;overflow:hidden;margin:0;}
3、调用百度地图
varmap=newBMap.Map("l-map");//创建地图实例
varpoint=newBMap.Point(111.818239,41.386087);//创建点坐标
map.centerAndZoom(point,5);//初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom();
map.addControl(newBMap.NavigationControl());//加入默认缩放平移控件
4、加入缩放平移控件
map.addControl(newBMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_RIGHT,type:BMAP_NAVIGATION_CONTROL_SMALL}));//右上角,仅包括平移和缩放button
map.addControl(newBMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT,type:BMAP_NAVIGATION_CONTROL_PAN}));//左下角,仅包括平移button
map.addControl(newBMap.NavigationControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,type:BMAP_NAVIGATION_CONTROL_ZOOM}));//右下角,仅包括缩放button
map.enableScrollWheelZoom();//启用滚轮放大缩小,默认禁用
map.enableContinuousZoom();//启用地图惯性拖拽,默认禁用
5、区域限制必须引入上面的区域限制js
区域限制样例是仅仅显示北京市
varb=newBMap.Bounds(newBMap.Point(116.027143,39.772348),
newBMap.Point(116.832025,40.126349));
try{
BMapLib.AreaRestriction.setBounds(map,b);
}catch(e){
alert(e);
}
6、加入覆盖物,计时器调用覆盖物
//加入覆盖物
functiongetBoundary(){
varbdary=newBMap.Boundary();
bdary.get("内蒙古",function(rs){//获取行政区域
varcount=rs.boundaries.length;//行政区域的点有多少个
for(vari=0;i varply=newBMap.Polygon(rs.boundaries[i],{strokeWeight:2,strokeColor:"#0000ff",fillColor:""});//建立多边形覆盖物fillColor字体显示出来 map.addOverlay(ply);//加入覆盖物 map.setViewport(ply.getPath());//调整视野 }); //计时器调用加入覆盖物 setTimeout(function(){ //清除地图覆盖物 map.clearOverlays(); map.centerAndZoom(111.818239,41.386087,6);//设置地图坐标,级别 //加入行政区域覆盖 getBoundary(); },1000); 7、加入标注 //point经纬度,txtinfo提示信息,type图片类型 functionaddMarker(point,txtInfo,type){ varinfoWindow=""; varmarker=newBMap.Marker(point,{icon:mapIcon(type)}); marker.addEventListener("click",function(){ infoWindow=newBMap.InfoWindow(txtInfo); this.openInfoWindow(infoWindow); map.addOverlay(marker);//加入标注 marker.setAnimation(BMAP_ANIMATION_BOUNCE);//动画效果 //创建ICON functionmapIcon(type){ varmappng; switch(parseInt(type)){ case1: mappng="${pageContext.request.contextPath}/images/triangle.png"; break; case2: mappng="${pageContext.request.contextPath}/images/ban.png"; varmapIcon=newBMap.Icon(mappng, newBMap.Size(24,24),{ offset:newBMap.Size(0,-5), imageOffset:newBMap.Size(0,0) returnmapIcon; 8、移除标注 map.removeOverlay(marker);//移除标注点 functionremoveMarker(){varmkrs=map.getOverlays();//获取地图上的标注,从0開始循环for(vari=0;i 9、加入文字functionaddTxt(point,txtInfo){varopts={position:point,//指定文本标注所在的地理位置offset:newBMap.Size(-20,5)//设置文本偏移量}varlabel=newBMap.Label(txtInfo,opts);label.setStyle({color:"#000000",fontSize:"12px",height:"20px",lineHeight:"20px",fontFamily:"微软雅黑",border:"#000000"});map.addOverlay(label);}