百度地图API使用

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

前段时间由于某些原因，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();

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
        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);
}

for(var j=0;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]);      // 打开信息窗口
    });
}

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());
         })