vue-baidu-map 绘制行政区划的轮廓，添加行政区划名称（含给覆盖物添加点击事件）——vue 百度地图开发

最终效果

完整代码

<template>
    <div>
        <baidu-map
                @ready="initMap"
                :zoom="12"
                center="北京市丰台区"
                style="height: 100vh;width: 100%"
                :scroll-wheel-zoom="true">
        </baidu-map>
    </div>
</template>
<script>
    export default {
        methods: {
            initMap({BMap, map}) {
                this.map = map
                let city = "北京市"
                let region = "丰台区"
                this.drawPolygon(region)
                this.addRegionLabel(city,region)
            },
            // 绘制行政区划轮廓
            drawPolygon(regionName) {
                let that = this
                let bdary = new BMap.Boundary();
                bdary.get(regionName, function (rs) {
                    //轮廓的总数 —— 有的区由多个封闭区域组成
                    let count = rs.boundaries.length;
                    if (!count) {
                        console.log('未能获取到当前输入的行政区域');
                        return;
                    }
                    for (let i = 0; i < count; i++) {
                        //创建多边形覆盖物
                        let ply = new BMap.Polygon(rs.boundaries[i],
                            {
                                strokeWeight: 2,
                                strokeColor: "red",
                                fillOpacity: 0.5,
                                strokeStyle: "dashed",
                            }
                        );
                        // 给覆盖物添加点击事件
                        ply.addEventListener('click', function () {
                            alert("我是:" + regionName)
                            // 改变自己的透明度
                            // this.setFillOpacity(0.6)
                        });
                        //添加覆盖物
                        that.map.addOverlay(ply);
                    }
                })
            },
            // 获取行政区划的坐标
            getReigonLocation(city, region) {
                return this.$http.get("/baiduMapAPI/place/v2/search", {
                    params: {
                        query: region,
                        region: city,
                        output: 'json',
                        city_limit: true,
                        ak: this.GLOBAL.baiduMapAK
                    }
                }).then(res => {
                    let location = res.data.results[0].location
                    return Promise.resolve(location);
                })
            },
            // 添加行政区划文本标注
            async addRegionLabel(city, region) {
                let point = await this.getReigonLocation(city, region)
                // 创建文本标注对象
                let label = new BMap.Label(region,
                    {
                        position: new BMap.Point(point.lng, point.lat),
                        offset: new BMap.Size(0, 0)    //设置文本偏移量
                    }
                );
                label.setStyle({
                    color: "red",
                    fontSize: "16px",
                    fontFamily: "微软雅黑",
                    background: "none",
                    border: "none",
                    fontWeight: 'bold'
                });
                // 在地图上添加文本标注对象
                this.map.addOverlay(label);
            },
        },
        data() {
            return {
                map: null
            }
        }
    }
</script>
<style scoped>
    /* 隐藏百度图片Logo */
    /deep/ .BMap_cpyCtrl {
        display: none;
    }

    /* 隐藏文字信息 */
    /deep/ .anchorBL {
        display: none;
    }
</style>