vue使用百度地图

vue引用百度地图参考资料:https://www.cnblogs.com/zqyw/p/11132152.html

遇到两个问题，一个是设置中心点，另一个是数据回显。
核心代码如下：

<div class="map" v-show="showMaps" style="width:100%;height:570px">
            <div style="font-size:22px;font-weight:bold;margin-left:10px;">点击地图选择地址</div>
            <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置"></el-input>
            <baidu-map style="width: 100%; height:500px;" :zoom="zoom" @ready="handler" @click="getClickInfo"
                :scroll-wheel-zoom='true' id="dituContent">
                <bm-view style="width: 100%; height:500px; flex: 1"></bm-view>
                <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none">
                </bm-local-search>
            </baidu-map>
        </div>
        <div class="zbutton" v-show="showMaps">
            <div>经度:{{center.lng}}</div>
            <div>维度:{{center.lat}}</div>
            <div>地址:{{adressName}}</div>
            <el-button @click="map_cancel">取消</el-button>
            <el-button @click="map_ok">确定</el-button>
        </div>


handler({ BMap, map }) {
            // 初始化地图,设置中心点坐标
            // var point = new BMap.Point(117.39, 115.25)
            var point = new BMap.Point(this.center.lng, this.center.lat)
            map.centerAndZoom(point, 13)

            // 添加鼠标滚动缩放
            map.enableScrollWheelZoom();
            // 添加缩略图控件
            map.addControl(new BMap.OverviewMapControl({ isOpen: false, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));
            // 添加缩放平移控件
            map.addControl(new BMap.NavigationControl());
            //添加比例尺控件
            map.addControl(new BMap.ScaleControl());
            //添加地图类型控件
            map.addControl(new BMap.MapTypeControl());
            this.map = map;
        },
        setMapPointer(){
            this.map.clearOverlays();
            var icon = new BMap.Icon("./static/map2.png", new BMap.Size(20, 20));
            var pointer = new BMap.Point(this.center.lng, this.center.lat)
            var marker = new BMap.Marker(pointer, { icon: icon });
            this.map.addOverlay(marker);
            this.map.panTo(pointer); //转到该点位置
            this.map.centerAndZoom(pointer, 15);    
            var circle = new BMap.Circle(pointer, 500);
            circle.setFillColor("blue"); //填充颜色
            circle.setStrokeWeight(1);// 设置圆形边线的宽度，取值为大于等于1的整数。
            circle.setFillOpacity(0.3);// 返回圆形的填充透明度。
            circle.setStrokeOpacity(0.3);// 设置圆形的边线透明度，取值范围0 - 1。 
            this.map.addOverlay(circle);// 把圆添加到地图中
        },
        getClickInfo(e) {
            this.center.lng = e.point.lng
            this.center.lat = e.point.lat
            /* 利用坐标获取地址的详细信息 */
            let geoCoder = new BMap.Geocoder();
            geoCoder.getLocation(e.point, res => {
                console.log(res);
                this.adressName = res.address
            })
            this.map.clearOverlays();
            var icon = new BMap.Icon("./static/map2.png", new BMap.Size(20, 20));
            var pointer = new BMap.Point(e.point.lng, e.point.lat)
            var marker = new BMap.Marker(pointer, { icon: icon });
            this.map.addOverlay(marker);
            var circle = new BMap.Circle(pointer, 500);
            circle.setFillColor("blue"); //填充颜色
            circle.setStrokeWeight(1);// 设置圆形边线的宽度，取值为大于等于1的整数。
            circle.setFillOpacity(0.3);// 返回圆形的填充透明度。
            circle.setStrokeOpacity(0.3);// 设置圆形的边线透明度，取值范围0 - 1。 
            this.map.addOverlay(circle);// 把圆添加到地图中
            // 以定位点为中心自定义画圆
        },
        map_cancel() {
            this.showMaps = false;
            this.modalVisible = true;
        },
        map_ok() {
            this.infact_center = this.center;
            this.showMaps = false;
            this.modalVisible = true;
        },
        showMap() {
            this.center.lat = this.infact_center.lat;
            this.center.lng = this.infact_center.lng;
            this.showMaps = true;
            this.modalVisible = false;
            setTimeout(()=>{
                this.setMapPointer();
            },800)
        }

<el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置"></el-input>
            <baidu-map style="width: 100%; height:500px;" :zoom="zoom" @ready="handler" @click="getClickInfo"
                :scroll-wheel-zoom='true' id="dituContent">
                <bm-view style="width: 100%; height:500px; flex: 1"></bm-view>
                <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none">
                </bm-local-search>
            </baidu-map>
1.<baidu-map> 是地图控件。ready是初始化功能。click是点击事件
bm-local-search是自带的搜索功能,双向绑定-model="addressKeyword"可以进行搜索
缺点是没有触发搜索的事件(可能是我没找到)
2.设置坐标点
var icon = new BMap.Icon("./static/map2.png", new BMap.Size(20, 20));
            var pointer = new BMap.Point(this.center.lng, this.center.lat)
            var marker = new BMap.Marker(pointer, { icon: icon });
            this.map.addOverlay(marker);
            this.map.panTo(pointer); //转到该点位置
3.地图中心位置定位:
this.map.panTo(pointer); //转到该点位置
注意,这里需要使用setTimeout,否则定位的位置不准确.可能和地图的显示隐藏有关系
4.画圆
var circle = new BMap.Circle(pointer, 500);
            circle.setFillColor("blue"); //填充颜色
            circle.setStrokeWeight(1);// 设置圆形边线的宽度，取值为大于等于1的整数。
            circle.setFillOpacity(0.3);// 返回圆形的填充透明度。
            circle.setStrokeOpacity(0.3);// 设置圆形的边线透明度，取值范围0 - 1。 
            this.map.addOverlay(circle);// 把圆添加到地图中
5.地图中获取的的坐标center.lat,center.lng是临时的,点击确定按钮把值传给infact_center.lat,infact_center.lng