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