【baidu-map】 vue百度地图插件使用——多边形围栏polygon

bm-polygon 的使用

1、设置地图电子围栏

2、添加多边形覆盖层

---

效果图：（自定义东菊公园的电子围栏）

参考代码

<template>
    <div>
        <div class="map-index">
            <baidu-map class="map" :ak="ak" :scroll-wheel-zoom="true" :center="center" :zoom="zoom" @ready="handler" @zoomend="syncCenterAndZoom">

                <!-- 东菊公园 电子围栏 path为转折点坐标 -->
                <bm-polygon :path="[
                    { lng: 110.375727, lat: 21.26359 },
                    { lng: 110.37575, lat: 21.262643 },
                    { lng: 110.375034, lat: 21.262609 },
                    { lng: 110.375013, lat: 21.261527 },
                    { lng: 110.375912, lat: 21.261518 },
                    { lng: 110.375907, lat: 21.260558 },
                    { lng: 110.376442, lat: 21.26047 },
                    { lng: 110.375278, lat: 21.259763 },
                    { lng: 110.374852, lat: 21.259935 },
                    { lng: 110.374057, lat: 21.260015 },
                    { lng: 110.373518, lat: 21.260205 },
                    { lng: 110.370809, lat: 21.260521 },
                    { lng: 110.37089, lat: 21.260883 },
                    { lng: 110.370728, lat: 21.261822 },
                    { lng: 110.371752, lat: 21.261986 },
                    { lng: 110.371811, lat: 21.26223 },
                    { lng: 110.37164, lat: 21.262613 },
                    { lng: 110.37169, lat: 21.263068 },
                    { lng: 110.371726, lat: 21.26319 },
                    { lng: 110.371883, lat: 21.263426 },
                    { lng: 110.372826, lat: 21.263636 },
                    { lng: 110.373401, lat: 21.263708 }]" 
                    stroke-color="red" fill-color="#093" :stroke-opacity="0.8" :fill-opacity="0.3" :stroke-weight="2" />
            </baidu-map>
        </div>
    </div>
</template>

<script>
import { BmlLushu, BaiduMap } from 'vue-baidu-map'

export default {
    name: '',
    components: {
        BaiduMap,
        BmlLushu
    },
    data() {
        return {
            BMap: {},
            map: {},
            // 地图
            ak: '你的百度地图密钥ak',
            center: { lng: 0, lat: 0 },
            zoom: 15,
        }
    },
    created() {
        this.handler()
    },
    methods: {
        /** 获取地图 */
        handler({ BMap, map }) {
            this.BMap = BMap;
            this.map = map;
            this.center.lng = 110.377567
            this.center.lat = 21.272624
            this.zoom = 15
        },

        /** 鼠标滚轮 */
        syncCenterAndZoom(e) {
            this.zoom = e.target.getZoom()
        }
    },
}
</script>

<style lang="scss" scoped>
.map-index {
    width: 100%;

    .map {
        width: 100%;
        height: 500px;
    }
}
</style>

bm-polygon 多边形

1. path

   多边形各转折点坐标

2. stroke-color

   多边形的边框颜色

3. stroke-opacity

   多边形边框的透明度（0~1）

4. stroke-weight

   多边形边框的宽度

5. fill-color

   多边形的填充颜色

6. fill-opacity

   多边形填充的透明度（0~1）

7. editing

   多边形的手动操作性（默认false）

---

注：本篇主要讲【baidu-map】的多边形【bm-polygon】的使用，

关于【baidu-map】标签可以点击这里查看

tip：

百度地图拾取坐标系统（快速获取各转折点坐标）拾取坐标系统 (baidu.com)

HTML颜色选择器（获取所需的边框颜色或填充颜色）HTML 颜色选择器 (w3ccoo.com)