vue百度地圖設置半徑畫圓圈地

<template>
    <div class="box-circle-map">
        <baidu-map ref="bCircleMap" class="map" :center="mapCenter" :zoom="15" :scroll-wheel-zoom="true" :inertial-dragging="false"
        :map-click="false" @ready="handler">
            <bm-view ref="viewMap" class="map"></bm-view>
            <bm-local-search :keyword="keyword" :nearby="circlePath" :auto-viewport="false" :panel="false"></bm-local-search>
            <bm-circle :center="circlePath.center" :radius="circlePath.radius" :stroke-opacity="0.5" fill-color="#39B1FC" :fill-opacity="0.3"
            :stroke-weight="2" stroke-color="#0000ff" @lineupdate="updateCirclePath" :editing="true"></bm-circle>
        </baidu-map>
        <div class="left-map-box">
            <el-input placeholder="請輸入" v-model="keyword" clearable>
                <el-button class="name_search_icon" slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <div class="condition-content">
                <div class="radius-range">半徑范圍</div>
                <div class="dis-flex-between radius-distance">
                    <div class="dis-flex-between">
                        <el-input placeholder="請輸入" v-model="circlePath.radius" size="small" clearable></el-input>
                        <span class="distance-txt">米</span>
                    </div>
                    <span>以內</span>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    // name: "baiduMapCircle",
    data() {
        return {
            map: null,
            BMap: null,
            mapCenter: {lng: 113.269129, lat: 23.134538},
            position: [],
            circlePath: {
                center: {
                    lng: 113.269129,
                    lat: 23.134538
                },
                radius: 1000
            },
            keyword: "餐館",
            overlayLabel: null,
        };
    },
    created(){
        // https://dafrok.github.io/vue-baidu-map/#/zh/overlay/circle
    },
    methods: {
        updateCirclePath(e) {
            let _self = this;
            let map = this.map;
            let BMap = this.BMap;
            let radius = e.target.getRadius();//獲取圓半徑（單位米，可利用BMapLib.DistanceTool工具自定義單位）
            let center = e.target.getCenter();//獲取圓心坐標
            let bounds = e.target.getBounds().getNorthEast();//獲取圓可視范圍東北角坐標
            // 覆蓋物的屬性發生變化時觸發
            this.circlePath.radius = e.target.getRadius();
            this.circlePath.center = e.target.getCenter();
            if(_self.overlayLabel != null){
                map.removeOverlay(_self.overlayLabel);
            }
            //生成Label覆蓋層
            var point = new BMap.Point(bounds.lng, center.lat); 
            _self.overlayLabel = new BMap.Label("半徑:"+ radius + "m",{offset:new BMap.Size(20,-10),position: point || e.target.rc[1].point});
            //添加覆蓋層
            map.addOverlay(_self.overlayLabel);
        },
        // 鼠標繪圖
        _mouseDrawingEvt(BMap, map){
            let _self = this;
            let styleOptions = {
                strokeColor:"#0000ff",    //邊線顏色。
                fillColor:"#39B1FC",      //填充顏色。當參數為空時，圓形將沒有填充效果。
                strokeWeight: 2,       //邊線的寬度，以像素為單位。
                strokeOpacity: 0.5,       //邊線透明度，取值范圍0 - 1。
                fillOpacity: 0.3,      //填充的透明度，取值范圍0 - 1。
                strokeStyle: 'solid' //邊線的樣式，solid或dashed。
            }
            //實例化鼠標繪制工具
            let drawingManager = new BMapLib.DrawingManager(map, {
                isOpen: false, //是否開啟繪制模式
                enableDrawingTool: true, //是否顯示工具欄
                drawingToolOptions: {
                    anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                    offset: new BMap.Size(100, 10), //偏離值
                    drawingModes: [BMAP_DRAWING_CIRCLE], // BMAP_DRAWING_CIRCLE 畫圓
                },
                circleOptions: styleOptions, //圓的樣式
            });

            //添加鼠標繪制工具監聽事件，用於獲取繪制結果
            drawingManager.addEventListener('circlecomplete', function(overlay) {
                _self.circlePath.center = overlay.getCenter();
                // 清除上一次繪制的圖
                _self.map.removeOverlay(overlay);
                drawingManager.close();
            });
        },
        // 初始化地圖
        handler ({BMap, map}) {
            this.BMap = BMap;
            this.map = map;
            this._mouseDrawingEvt(BMap, map)
        },
    },
    mounted(){
        let _self = this;
        this.$nextTick(() =>{
            if (_self.$refs.bCircleMap) {
                _self.$refs.bCircleMap.$el.style.height = (window.innerHeight - 132) + 'px';
            }
            if(_self.$refs.viewMap){
                _self.$refs.viewMap.$el.style.height = (window.innerHeight - 132) + 'px';
            }
            // 監聽窗口大小變化
            window.addEventListener('resize', () => {
                if (_self.$refs.bCircleMap) {
                    _self.$refs.bCircleMap.$el.style.height = (window.innerHeight - 132) + 'px';
                }
                if(_self.$refs.viewMap){
                    _self.$refs.viewMap.$el.style.height = (window.innerHeight - 132) + 'px';
                }
            })
        })
    },
};
</script>

<style lang="scss" scoped>
.box-circle-map{
    position: relative;
    padding: 20px;
    .left-map-box{
        position: absolute;
        top: 40px;
        left: 40px;
        .name_search_icon{
            background: #39b1fc;
            border-color: #39b1fc;
            color: #fff;
            border-radius: 0 4px 4px 0;
            height: 40px;
        }
        .condition-content{
            background: #fff;
            padding: 20px;
            margin-top: 5px;
            color: #979797;
            .radius-range{
                height: 28px;
                line-height: 32px;
            }
            .radius-distance{
                .distance-txt{
                    margin: 0 5px;
                }
            }
        }
    }
}
</style>