初始化BMap
var map = new BMap.Map("map");
var point = new BMap.Point(108.948246, 34.353933);
map.centerAndZoom(point, 5);
配置BMap
map.enableScrollWheelZoom();//启用滚轮放大缩小,默认禁用
map.enableInertialDragging();//启用地图惯性拖拽,默认禁用
添加控件
var NavigationControl = new BMap.NavigationControl();//地图平移缩放控件
var OverviewMapControlOptions ={//缩略地图控件设置参数
anchor: BMAP_ANCHOR_TOP_RIGHT,//位置设置
size: new BMap.Size(100,100),//大小设置
isOpen:true//开关设置
}//其他控件也有相应参数
var OverviewMapControl = new BMap.OverviewMapControl(OverviewMapControlOptions);//缩略地图控件
var ScaleControl = new BMap.ScaleControl();//缩放比例控件
map.addControl(NavigationControl);
map.addControl(OverviewMapControl);
map.addControl(ScaleControl);
添加Marker
//var point = new BMap.Point(108.948246, 34.353933);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
添加多个Marker
//获取经纬度数据
var CityData = [
{lon:108.948246, lat:31.353933},
{lon:107.948246, lat:34.353933},
{lon:106.948246, lat:39.353933},
{lon:105.948246, lat:38.353933}
];
var allPoint = [];//设置一个空数组存放Ponit,用于加载完marker重置BMap视图
$.each(CityData, function() {
var self = this;
var thisPoint = new BMap.Point(this.lon, this.lat);
var thisMarkerOptions = { //设置Marker参数
enableDragging: true, //启用拖拽,默认为false
raiseOnDrag: true, //开启拖拽动画
icon: new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25)), //设置icon
rotation: 0, //旋转角度
title: self.lat + self.lon
}
var thisMarker = new BMap.Marker(thisPoint, thisMarkerOptions);
allPoint.push(thisPoint);
map.addOverlay(thisMarker); //循环添加Marker
var bestView = map.getViewport(allPoint); //根据所有点获取最佳视图,然后重置视图
window.setTimeout(function() {
map.centerAndZoom(bestView.center, bestView.zoom);
}, 1000);
});
});
网友评论