美文网首页
BMap添加覆盖物

BMap添加覆盖物

作者: _undefined | 来源:发表于2020-06-02 09:45 被阅读0次
初始化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);
});


});

相关文章

网友评论

      本文标题:BMap添加覆盖物

      本文链接:https://www.haomeiwen.com/subject/xqnxpttx.html