百度地图API使用

前段时间由于某些原因,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());
         })
至此,项目中要求的基本功能实现完毕,至于其他的由于没有要求也就没有去看,以后用到了再说吧。


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值