vue中引用百度地图插件实现根据地址信息在地图上标记

下载插件：
npm install vue-baidu-map -save


全局中引用：

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: 'zpDQY1hqA74CGeGEHPxMeIgdU896thpW'          //百度地图官网申请的key
})


html：

<div class="baidumap">
    <baidu-map
            :zoom="zoom"        //地图缩放大小
            :center="center"      //中心城市居中显示
            @ready="handler"      //百度地图自带的方法handler
            style="height:300px; width:1060px"
            :scroll-wheel-zoom="true"            //是否支持鼠标滚轮缩放地图
            :double-click-zoom="false">         //是否支持鼠标双击缩放地图
<!--获取城市列表-->
        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>        
    </baidu-map>
</div>


js:

    export default {
        name: "shopShouye",
        data(){
            return {
                zoom: 17,
                center:'',                             //中心点
                preAddress: '四川省成都市',        //默认显示的中心城市
                detailAddress: ''                         //街道地址
            }
        }
    }


 //根据地址信息使用getPoint将地址转化为经纬度

handler:function({ BMap, map }) {                      
    const geocoder = new BMap.Geocoder()
    geocoder.getPoint(this.preAddress + this.detailAddress, function(res) {      
        const { lng, lat } = res
        var point = new BMap.Point(lng, lat) // 用于描述地图上点的经纬度。
        map.centerAndZoom(point, 17)
        var marker = new BMap.Marker(point) // 创建标注
        map.addOverlay(marker) // 将标注添加到地图中
        window.map = map  // 其他函数还会调用map，所以把它挂载到全局上
    })
},


注：百度地图里的map值不能再生命周期函数中更改，只能在自带的handler方法中进行更改。