百度地图API开发:多边形覆盖物鼠标高亮效果及单击事件

1
2
3
4
5
6
7
8
9
10
11
    //异步加载地图
    function loadJScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = '//api.map.baidu.com/api?v=2.0&ak=&ak=11Z8uiP8kIz6AG0Vjiwzbc5f9I**&callback=init';
        document.body.appendChild(script);
    }

    window.onload = loadJScript;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    //全局变量;
    var map;

    function init() {
        map = new BMap.Map("container", {
            enableMapClick: false,
            maxZoom: 12
        });
        var point = new BMap.Point(120.3663, 31.534519);
        map.centerAndZoom(point, 12);
        map.enableScrollWheelZoom();
        map.disableDragging();     //禁止拖拽
        // map.setMapType(BMAP_SATELLITE_MAP);

        //渲染多边形;
        getBoundary();
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
    //获取绘制的多边形边界;
    function getBoundary() {
        var areas = [];
        
          //建立多边形覆盖物;
        var colors = ["#fff492", "#fff492", "#98d057", "#e19ee6", "#1ad3da", "#ffc11d", "#98e800", "#b95817", "#03a9f4", "#39d0a4", "#8bbb53"];
        var ply = [];
        for (var i = 0; i < areas.length; i++) {
            ply[i] = new BMap.Polygon(areas[i], {strokeWeight: 2, strokeOpacity: 0.5, strokeColor: "#01AAED"});
            ply[i].setFillColor(colors[i]);
            ply[i].setFillOpacity(0.35);

            //添加覆盖物;
            map.addOverlay(ply[i]);
            //多边形鼠标高亮效果;
            getMouse(areas[i], i);
        }


        //多边形标签;
        var labelCenter = [], ployLabel = [];
        function addLabel(arr, i) {
            var lng = arr.split(";")[0].split(",")[0];
            var lat = arr.split(";")[0].split(",")[1];
            labelCenter[i] = new BMap.Point(lng, lat);
            var labelContent = "<div class='content'>" + labelData[i] + "</div>";
            ployLabel[i] = new BMap.Label(labelContent, {
                offset: new BMap.Size(0, 0),
                position: labelCenter[i]
            });

            ployLabel[i].setStyle({
                "z-index": "999999",
                "padding": "10px",
                "width": "300px",
                "border": "0px solid #2F4056"
            });

            map.addOverlay(ployLabel[i]);
        }
         //给多边形添加鼠标事件;
        function getMouse(arr, i) {
            ply[i].addEventListener("mouseover", function () {
                ply[i].setStrokeColor("red");
                ply[i].setFillColor("#fff");
                addLabel(arr, i);
                map.panTo(new BMap.Point(panToCenter[i][0], panToCenter[i][1]));
            });

            ply[i].addEventListener("mouseout", function () {
                ply[i].setStrokeColor("#01AAED");
                ply[i].setFillColor(colors[i]);
                //清除标签;
                map.removeOverlay(ployLabel[i]);
            });

            ply[i].addEventListener("click", function () {
                console.log(i + " 多边形单击事件API接口.")
            });
        }