百度地图API使用

原文地址：http://blog.csdn.net/pandaflyup/article/details/8521591

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

一、加载基本地图

[javascript] view plaincopyprint?

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

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

[javascript] view plaincopyprint?

1. for(var j=0;j<latlng.length;j++){  
2.         var marker1 = new BMap.Marker(latlng[j],{title:j+"号摄像头"+"("+weidu[j]+","+jingdu[j]+")"});    
3.         map.addOverlay(marker1);  
4.         var MyIcon=new BMap.Icon(image,new BMap.Size(40, 43));  
5.         marker1.setIcon(MyIcon);                     
6.           
7.         showinfomessage(marker1,j);  
8. }  

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）

[javascript] view plaincopyprint?

1. function showinfomessage(marker,number){  
2.      var opts = {    
3.           width : 100,     // 信息窗口宽度    
4.           height: 60,     // 信息窗口高度       
5.       }    
6.      var infoWindow = new BMap.InfoWindow(number+"号摄像头", opts);  // 创建信息窗口对象      
7.      marker.addEventListener("click", function(){   
8.      map.openInfoWindow(infoWindow, latlng[number]);      // 打开信息窗口   
9.     });    
10. }  

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自己实现了）

[javascript] view plaincopyprint?

1. //  var strictBounds=new Bmap.Bounds(new BMap.Point(116.3645,39.9673),new BMap.Point(116.3646,39.9685));//sw西南,ne东北  
2.          var strictBounds=map.getBounds();  
3.          map.addEventListener("dragend", function(){  
4.          if(strictBounds.containsPoint(map.getCenter()))return;  
5.          var c=map.getCenter();  
6.           x=c.lng,  
7.           y=c.lat,  
8.           maxX=strictBounds.getNorthEast().lng,  
9.           maxY=strictBounds.getNorthEast().lat,  
10.           minX=strictBounds.getSouthWest().lng,  
11.           minY=strictBounds.getSouthWest().lat;  
12.          if (x < minX) x = minX;  
13.          if (x > maxX) x = maxX;  
14.          if (y < minY) y = minY;  
15.          if (y > maxY) y = maxY;  
16.          map.centerAndZoom(new BMap.Point(x,y),map.getZoom());  
17.          })