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

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

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在地图上的信息
})

// 指定标记点的图片地址
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在地图上的信息
})

// 先创建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进行事件绑定

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

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

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()也会触发此事件
});

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

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

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的写法

// 根据地图显示密度和地图当前等级计算距离的基础数组
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]) : "";
    }
}