百度地图API使用

来源:互联网 发布:云汇聚英是网络传销吗 编辑:程序博客网 时间:2024/05/01 07:17

前段时间由于某些原因,google地图加载的特别慢,于是乎就改为使用百度地图,如下是项目中用到的基本功能。

一、加载基本地图

var ZoomLevel=18;var map=new BMap.Map("mapBox");var MyPoint = new BMap.Point(116.3645,39.9673); map.centerAndZoom(MyPoint,ZoomLevel); //添加地图平移缩放控件map.addControl(new BMap.NavigationControl());//控制地图的最大和最小缩放级别map.setMinZoom(16);map.setMaxZoom(19);//允许使用鼠标滚轮进行地图缩放map.enableScrollWheelZoom();
二、添加marker

for(var j=0;j<latlng.length;j++){        var marker1 = new BMap.Marker(latlng[j],{title:j+"号摄像头"+"("+weidu[j]+","+jingdu[j]+")"});          map.addOverlay(marker1);        var MyIcon=new BMap.Icon(image,new BMap.Size(40, 43));        marker1.setIcon(MyIcon);                                   showinfomessage(marker1,j);}
三、显示信息窗口(infowindow)

function showinfomessage(marker,number){     var opts = {            width : 100,     // 信息窗口宽度            height: 60,     // 信息窗口高度          }       var infoWindow = new BMap.InfoWindow(number+"号摄像头", opts);  // 创建信息窗口对象     marker.addEventListener("click", function(){      map.openInfoWindow(infoWindow, latlng[number]);      // 打开信息窗口     });  }
四、控制地图的显示范围(这个我在网上找了好久都没发现有人做,后来只能查API自己实现了)

//  var strictBounds=new Bmap.Bounds(new BMap.Point(116.3645,39.9673),new BMap.Point(116.3646,39.9685));//sw西南,ne东北         var strictBounds=map.getBounds();         map.addEventListener("dragend", function(){         if(strictBounds.containsPoint(map.getCenter()))return;         var c=map.getCenter();          x=c.lng,          y=c.lat,          maxX=strictBounds.getNorthEast().lng,          maxY=strictBounds.getNorthEast().lat,          minX=strictBounds.getSouthWest().lng,          minY=strictBounds.getSouthWest().lat;         if (x < minX) x = minX;         if (x > maxX) x = maxX;         if (y < minY) y = minY;         if (y > maxY) y = maxY;         map.centerAndZoom(new BMap.Point(x,y),map.getZoom());         })
至此,项目中要求的基本功能实现完毕,至于其他的由于没有要求也就没有去看,以后用到了再说吧。


原创粉丝点击