百度地图 marker 闪烁_百度地图使用总结

-----------项目中使用百度地图的总结分享-----------

初始化与配置

// 初始化
var mapO = new BMap.Map("mapContainerId");
// 开启/关闭鼠标滚轮缩放
mapO.enableScrollWheelZoom(true); 
// 设置地图允许的最小级级别
mapO.setMinZoom(5);
// 设置地图允许的最大级别
mapO.setMaxZoom(19);

功能与API

• 地图跳转
  • map.centerAndZoom()

var map = new BMap.Map("container");
// 创建地图实例  
var point = new BMap.Point(116.404, 39.915);
// 地图显示等级
var zoom = 12;
// ponit 为百度坐标点
map.centerAndZoom(point, zoom);

• 获取地图中心点坐标
  • map.getCenter()
• 获取地图当前显示等级.
  • .map.getZoom()
• 清除地图上的标记
  • map.clearOverlays()
• 将经纬度数据转换为百度坐标点
  • new BMap.Point(Longitude, Latitude)
• 计算两点之间距离, 单位米
  • map.getDistance(startPoint, endPoint)
• 地图上添加标记与绑定事件 -- label(html片段)
  • new BMap.Label()
  • map.addOverlay()

var point = new BMap.Point(point.lng, point.lat);
// 配置信息
var opts = {
    position: point, // 指定文本标注所在的地理位置
    offset: new BMap.Size(-32, -60) //设置文本偏移量
};
// 创建文本标注对象
var label = new BMap.Label('<p>' + e.count + '</p>', opts); 
// 设置样式
label.setStyle({
    height: "60px",
    width: '60px',
    lineHeight: '50px',
    fontFamily: "微软雅黑",
    background: 'url(/image/ico-sheng.png) no-repeat center',
    backgroundSize: '70%'
});
map.addOverlay(label);
// 绑定事件
label.addEventListener('dblclick', function (evt) {
    // this为label对象, 包含label在地图上的信息
})

• 地图上添加标记与绑定事件(支持html字符串) -- marker(图片)
  • new BMap.Icon()
  • new BMap.Marker()
  • map.addOverlay()

// 指定标记点的图片地址
var iconImg = 'http://lbsyun.baidu.com/jsdemo/img/fox.gif';
// 创建覆盖物标注
var myIcon = new BMap.Icon(iconImg, new BMap.Size(26, 32));
var marker = new BMap.Marker(poniter, { icon: myIcon, title: info.MonitorName }); 
// 标注添加到地图
map.addOverlay(marker);
// 标注绑定事件
marker.addEventListener('click', function(evt) {
    // this为label对象, 包含label在地图上的信息
})

• 地图上展示window信息窗口
  • new BMap.InfoWindow()

// 先创建marker
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.417854,39.921988);
var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);  
// 窗口的配置
var opts = {
    width: 200,
    height: 130,
    title: ""
};
var content = "此处可为html片段";
// 创建window info
var infoWindow = new BMap.InfoWindow(content, opts);
// 点击marker显示窗口
marker.addEventListener("click", function(){          
    map.openInfoWindow(infoWindow,point); //开启信息窗口
});
// 窗口内的html片段的元素可通过行内的onclick绑定事件
// 也可通过jquery进行事件绑定

• 根据地址解析出经纬度信息
  • new BMap.Geocoder()

// 创建转换器
var geo = new BMap.Geocoder();
// 调用getPoint方法
geo.getPoint("北京市海淀区上地10街", function(point){
    if (point) {
       // 解析成功返回百度坐标点
    }else{
       // 解析失败
    }
}, "北京市");
// 第三个参数(北京市)为地址所在的城市名, 当转换的为省份时,可为中国

• 根据经纬度解析出地址信息
  • new BMap.Geocoder()

// 地图中心点, 或百度坐标点
var center = map.getCenter();
// 创建转换器
var geocInit = new BMap.Geocoder();
// 调用getLocation方法
geocInit.getLocation(pt, function(rs){
    var addComp = rs.addressComponents;
    console.log(addComp);
});

• 其他地图坐标转换为百度地图坐标
  • new BMap.Convertor()
  • 坐标转换栗子
  • 坐标转换参数说明文档

var ggPointers = [];
var convertor = new BMap.Convertor();
function translateCallback(data){
    // data为转换结果
    if(data.status === 0) {
       // 转换完成
    }
};
convertor.translate(ggPointers, 3, 5, translateCallback);
// convertor.translate(array, from, to, cb);

事件监听

// 地图实例
var mapO = new BMap.Map(Id);
// 窗口改变的事件
mapO.addEventListener("resize", function () {

});
// 拖拽结束事件
mapO.addEventListener("dragend", function () {

});
//缩放结束
mapO.addEventListener("zoomend", function () {
    // 地图的centerAndZoom()也会触发此事件
});

插件使用及其他

地图框选

• 官方文档
  • 官方API说明
  • 官方的框选功能为框选搜索框内的某些资源, 依赖keyword关键字.

// 搜索框选区域内的餐馆
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
var searchInRect = new BMapLib.SearchInRectangle(map,"餐馆",{strokeWeight : 2});

• API
  • 开启框选功能 open()
  • 关闭选框 close(), 可设置框选结束后自动关闭({autoClose: true})

searchInRect.open();
searchInRect.close();

• 其他方式使用
  • 框选之后, 拿到框的经纬度范围, 发送请求, 接收返回的数据(需修改插件源代码)
  • window内注册函数getFrameSelect, 框选结束后会调用此函数, 返回参数包含框选区域的经纬度信息.

var map = new BMap.Map("container");
var selectRect = new BMapLib.SearchInRectangle(map, '', {
    renderOptions: {
        map: map,
        strokeWeight: 3, //遮盖层外框的线宽
        strokeColor: "red", // 遮盖层外框的颜色
        fillColor: "white", //填充颜色
        opacity: 0.5, //透明度            
        followText: "拖拽拉框选取资源", //开启拉框搜索状态后，鼠标跟随的文字
        autoClose: true, //自动关闭拉框
        autoViewport: false, //是否自动移动到屏幕中间
        alwaysShowOverlay: false //是否可以重新拉框
    }
});
window.getFrameSelect =(ret) => {
    var geocoder= new BMap.Geocoder()
    var params = {
        from_Longitude: ret.Ol.lng,
        from_Latitude:  ret.Ol.lat,
        to_Longitude: ret.xl.lng,
        to_Latitude: ret.xl.lat,
    };
    geocoder.getLocation(ret.xl, function(geocoderResult){
        if(geocoderResult){
            // 完善参数
            params.area_Name = 
                geocoderResult.addressComponents.city || geocoderResult.addressComponents.district;
            params.province_Name = geocoderResult.addressComponents.province;
            // 请求资源

        }else{
            that.$message.info("地址解析失败, 请刷新后重试");
            return;
        }
    })
};
// vue中由于组件的封闭性, methods下注册的函数全局无法调用, 所以采用window.getFrameSelect的写法

地图上监控点密度显示

• 根据选择的点位密度60%, 80%, 渲染地图上的监控点.

// 根据地图显示密度和地图当前等级计算距离的基础数组
var distanceLevelArr = [10000000, 5000000, 2000000, 1000000, 500000, 200000, 100000, 50000, 25000, 20000, 10000, 5000, 2000, 1000, 500, 200, 100, 50, 20];
/* 根据地图的显示等级和选择的渲染密度计算两个监控点之间的最小距离
 * densityValue的职位0.8 0.6 0.4 0.2
 * 计算出distance, 用于过滤返回的监控点, 地图上渲染上去的任意两点之间的距离不能小于distance的值.
*/
var distance = distanceLevelArr[map.getZoom() - 1] * densityValue;
var allMonitorArray = [/*后台返回的所有监控数组*/];
var renderArray = []; // 渲染到地图上的监控数组
for(var i = 0, len = allMonitorArray.length; i < len; i++){
    if(i === 0){
        renderArray.push(allMonitorArray[i]);
    }else{
        var isFar = renderArray.some((ele) => {
            var ps = new BMap.Point(allMonitorArray[i].Longitude, allMonitorArray[i].Latitude);
            var es = new BMap.Point(ele.Longitude,ele.Latitude);
            return map.getDistance(ps, es) > distance;
        });
        isFar ? renderArray.push(allMonitorArray[i]) : "";
    }
}

备注

• 从其他模块跳到地图并调用centerAndZoom(), 可能会出现跳转位置错误, 需在地图block后, 在setTimeout中调用centerAndZoom()
• 百度地图的显示级别和天地图的显示级别, 相差一个等级.
• centerAndZoom()会触发zoomend事件, 需监听缩放结束事件, 可使用jquery的mousewheel事件, 结合throttle.

---