通过百度地图api实现选定区域为高亮显示其余区域为遮罩的效果,js代码如下(但是它运行之后没结果,它错在哪?)

// 创建地图实例
    var map = new BMap.Map("myMap",{enableMapClick: false});
    //以四川省为地图中心,显示层级为13
    map.centerAndZoom("四川省", 13);
    //允许滚动鼠标缩放地图
    map.enableScrollWheelZoom(true);
    setTimeout(function() {
        map.enableDragging(); //两秒后开启拖拽
    }, 2000);
    var index = 0;
    var myGeo = new BMap.Geocoder();
    //需要批量解析显示的地址
    var adds = [
        "煎茶镇",
        "新兴镇",
        "永安镇",
        "白家沟",
        "正兴镇",
        "万安镇",
        "南湖湿地公园"
    ];
    var blist = [];
    var districtLoading = 0;

    function getBoundary() {
        //设置指定显示区域双流、龙泉驿
        addDistrict("成都市双流区");
        addDistrict("成都市龙泉驿区");
    }

    function addDistrict(districtName) {
        //使用计数器来控制加载过程
        districtLoading++;
        var bdary = new BMap.Boundary();
        bdary.get(districtName, function(rs) { //获取行政区域
            var count = rs.boundaries.length; //行政区域的点有多少个
            if(count === 0) {
                alert('未能获取当前输入行政区域');
                return;
            }
            for(var i = 0; i < count; i++) {
                blist.push({ points: rs.boundaries[i], name: districtName });
            };
            //加载完成区域点后计数器-1
            districtLoading--;
            if(districtLoading == 0) {
                //全加载完成后画端点
                drawBoundary();
            }
        });
    }

    function drawBoundary() {
        //包含所有区域的点数组
        var pointArray = [];

        /*画遮蔽层的相关方法
         *思路: 首先在中国地图最外画一圈,圈住理论上所有的中国领土,然后再将每个闭合区域合并进来,并全部连到西北角。
         *      这样就做出了一个经过多次西北角的闭合多边形*/
        //定义中国东南西北端点,作为第一层
        var pNW = { lat: 59.0, lng: 73.0 }
        var pNE = { lat: 59.0, lng: 136.0 }
        var pSE = { lat: 3.0, lng: 136.0 }
        var pSW = { lat: 3.0, lng: 73.0 }
        //向数组中添加一次闭合多边形,并将西北角再加一次作为之后画闭合区域的起点
        var pArray = [];
        pArray.push(pNW);
        pArray.push(pSW);
        pArray.push(pSE);
        pArray.push(pNE);
        pArray.push(pNW);
        //循环添加各闭合区域
        for(var i = 0; i < blist.length; i++) {
            //添加显示用标签层
            var label = new BMap.Label(blist[i].name, { offset: new BMap.Size(20, -10) });
            label.hide();
            map.addOverlay(label);

            //添加多边形层并显示
            var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 2, strokeColor: "#5185E6", fillOpacity: 0.01, fillColor: " #FFFFFF" }); //建立多边形覆盖物
            ply.name = blist[i].name;
            ply.label = label;
            map.addOverlay(ply);

            //将点增加到视野范围内
            var path = ply.getPath();
            pointArray = pointArray.concat(path);
            //将闭合区域加到遮蔽层上,每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
            pArray = pArray.concat(path);
            pArray.push(pArray[0]);
        }

        //限定显示区域,需要引用api库
        var boundply = new BMap.Polygon(pointArray);
        BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
        map.setViewport(pointArray); //调整视野 

        //添加遮蔽层(描边线条,遮罩层颜色)
        var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#fff", strokeWeight: 0.00001, fillColor: "#ffffff", fillOpacity: 1 }); //建立多边形覆盖物
        map.addOverlay(plyall);
    }

    function bdGEO() {
        var add = adds[index];
        geocodeSearch(add);
        index++;
    }
    getBoundary();
    function geocodeSearch(add) {
        if(index < adds.length) {
            setTimeout(window.bdGEO, 400);
        }
        myGeo.getPoint(add, function(point) {
            if(point) {
                var address = new BMap.Point(point.lng, point.lat);
                addMarker(address, new BMap.Label(add, { offset: new BMap.Size(20, -10) }));
            }
        }, "成都市");
    }
    // 编写自定义函数,创建标注
    function addMarker(point, label) {
        //使用自定义图标做标注点,宽高为8 10
        var myIcon = new BMap.Icon("marker_red_sprite2.png", new BMap.Size(8, 10));
        var marker = new BMap.Marker(point,{icon: myIcon});
        map.addOverlay(marker);
        marker.setLabel(label);
        label.setStyle({
            display:"none"
        })
        marker.addEventListener("mouseover",function(e){
            var label = this.getLabel();
            //设置label的样式,这里没有过多要求,能显示出来就行
            label.setStyle({
                display:"block",
                borderRadius:"2px",
                border:"1px solid #5185E6",
                padding:"2px 4px"
            })
        });
        marker.addEventListener("mouseout",function(e){
            var label = this.getLabel();
            label.setStyle({
                display:"none"
            })
        });
    }
    bdGEO();

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值