vue使用百度地图地区名称逆解析且在地图构建完成时多标点

 首先安装 vue-baidu-map 然后根据官方文档完成地图的初始化，这里就不多做赘述详情查看

jspopularGL | 百度地图API SDK (baidu.com)

Vue Baidu Map (dafrok.github.io)

data中数据

map:{
          center: {lng: 116.661424, lat: 40.136351},
          zoom: 11,
          show: true,
          dragging: true,
          points:[],
          pt:[],
          }

html

<div>
    <baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">
      <!--缩放-->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      <!--定位-->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" ControlAnchor="BMAP_ANCHOR_TOP_RIGHT"></bm-geolocation>
      <bm-point-collection :points="map.points" :dragging="map.dragging" animation="BMAP_ANIMATION_DROP" anchor="BMAP_ANCHOR_BOTTOM_RIGHT" shape="BMAP_POINT_SHAPE_STAR" size="BMAP_POINT_SIZE_HUGE" ></bm-point-collection>
    </baidu-map>
  </div>

data和html按照官方文档进行配置就可以了(cv工程师😏)

 地图上两个红色的标点就是需要做的东西，刚开始以为很简单不就加两个点吗

后来看文档发现从后台拿到的数据在created中加到data当中比地图加载完成要慢，开始不以为然直接再调用加载一次不就好了，直接给数据加上监听函数，发现然并卵..........

这样不行，那直接watch，然后发现也不行........😤

其实换一种思路，不在cerated中加载数据，在由ready绑定的handler函数当中来加载数据，并且在.then后运行地区名称逆解析渲染不就行了

async getStatisticsTask(){
          await statisticsAreaSelect(this.map.searchForm,this.map.page).then( (res)=>{
          this.map.pt=res.data.records
        })
        },
handler ({BMap, map}) {
          var geoc = new BMap.Geocoder();
          let me = this;
          me.getStatisticsTask().then(()=>{
            let pt = me.map.pt
          for (let index = 0; index < pt.length; index++) {
            let pr= pt[index].areaName;
            geoc.getPoint(pr,function (rs){
            me.map.points.push({lng: rs.lng, lat: rs.lat})
          })
          }
          })
          // 鼠标缩放
          map.enableScrollWheelZoom(true);
          // 点击事件获取经纬度
          map.addEventListener('click', function (e) {
          })
        }

 var geoc = new BMap.Geocoder();//创建实例

geoc.getPoint这个就是根据地区名称来逆解析获取坐标{lng，lat}

说实话，这是第一次用百度地图，刚开始自我感觉良好，后来才发现写的真的很烂

希望大佬多多指点

最后给个提示

ready {BMap, map} 地图组件渲染完毕时触发，返回一个百度地图的核心类和地图实例。百度地图组件是异步加载，请不要尝试在组件的生命周期中访问 BMap 核心类和 map 实例，如有需要，请在所需组件的 ready 事件回调函数的参数中获取。

点赞加关注，回家不迷路😜😜😜