vue2.x 接入百度地图 vue-baidu-map记录

vue-baidu-map 文档地址： [https://dafrok.github.io/vue-baidu-map/#/zh/start/usage]
要实现的功能类似贝壳找房： 主页面显示地图小图 显示交通 医院等配置按钮， 点击按钮跳转地图大图新页面 默认搜索小图点击的配置信息 如图示：

image.png
image.png

1.命令行引入vue-baidu-map

npm i vue-baidu-map --save

main.js / index.js 主js配置相关信息

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: '......' // 你的百度AK
 })

2.在小地图子组件内配置地图相关code

<template>
    <div class="baidu-map-box">
        <baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">
            <!--缩放-->
            <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT" />
            <!--定位-->
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :show-address-bar="true" :auto-location="true"/>
            <!--点-->
            <bm-marker :position="point" animation="BMAP_ANIMATION_BOUNCE" />
        </baidu-map>
        <div class="map-search">
            <span
                v-for="item in searchCondition"  // 配置搜索条件
                :key="item.value"
                class="search-condition"
                @click="searchByKeyWords(item.text)"
            >{{ item.text }}
            </span>
        </div>
    </div>
</template>

data() {
  return {
      map: {
          center: {lng: '', lat: ''},
          zoom: 12.8  // zoom 取值为 4~21，4即视野最大，21即视野最小。一般用 14~18
      },
      cityName: ''
  }
}

 handler({ BMap, map }) { //地图默认渲染事件
        // 鼠标缩放
        map.enableScrollWheelZoom(true)
        // 点击事件获取经纬度
        map.addEventListener('click', function(e) {
            console.log(e.point.lng, e.point.lat)
        })
                // 添加鼠标滚动缩放
        // 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());
},

因为这是子组件 需要父组件把从接口传回的城市名称，经纬度传递给子组件。但是遇到一个问题，handler方法应该是在created生命周期之前运行的，所以里面获取不到从父组件props过来的数据，本菜鸡扑腾了一天，得到方法 deep-watch:

props: {
    mapData: {
        type: Object
    }
},
watch: {
    'mapData':{
        handler: function (val, oldVal) {
                if (val && !val.lng) return
                this.map.center.lng = val.lng
                this.map.center.lat = val.lat
                this.cityName = val.cityName
        },
        deep: true
    }
},

买一送一 附赠处理 {__ob__: Observer}类型数据，获取不到对象里面值的方法
JSON.parse(JSON.stringify(this.data))
Object.assign({}, this.data)
都可以助力 把对象修改成正常的格式

3.在大地图组件配置如下：

<template>
    <div class="baidu-map-box">
        <div class="map-search">
            <span
                v-for="item in searchCondition" // 搜索条件
                :key="item.value"
                class="search-condition"
                @click="searchByKeyWords(item.text)"
            >{{ item.text }}
            </span>
        </div>
        <baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">
            <!--缩放-->
            <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT" />
            <!--定位-->
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :auto-location="true" />
            <!--点-->
            <bm-marker
                v-for="(item, index) of markers"
                :key="index"
                :position="{ lng: markers.lng, lat: markers.lat }"
                @click="lookDetail(item)"
            >
                            <bm-local-search :keyword="keyword" :nearby="map" :auto-viewport="true" :location="location" style="display:none"></bm-local-search>
                            <bm-circle :center="map.center" :point="map.center" :radius="map.radius" strokeColor="#eee" fillOpacity='.1'></bm-circle>
            </bm-marker>
        </baidu-map>
    </div>
</template>

handler ({BMap, map}) {
            // 初始化地图,设置中心点坐标
            var point = new BMap.Point( this.map.center.lng , this.map.center.lat )
            map.centerAndZoom(point, this.map.zoom)
            // 添加鼠标滚动缩放
            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());
},

大概就是这样子啦 ，后面有什么更新再补上