记一次baidu地图功能需求

技术栈：vue+element-ui+baiduMap

功能实现：

1.对话框中展示地图

2.通过点击地图上的点获取经纬度

3.通过检索地名在地图上标记并且获取经纬度

bug系列：

1.通过watch对话框的显示隐藏mapDialogVisible，加载地图，地图不显示

watch: {
    mapDialogVisible(val) {
      if(val){
        var map = new BMap.Map("positionMap");
        map.centerAndZoom("杭州", 11);
      }
    }
  },

原因：百度地图是必须让它在页面加载完成后显示（生命周期mounted），但是由于element的对话框是基于v-if这个功能，所以导致地图加载不成功，说人话就是地图加载时页面还没加载完，并未获取到dom元素。

解决：使用Vue.nextTick

Vue.nextTick在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

getGps() {
      var that = this 
      this.mapDialogVisible = true
      this.$nextTick(function () {
      //  1.展示地图
      this.map = new BMap.Map("positionMap");
      this.map.centerAndZoom("杭州", 11);
      
      //  2.地图上点击获取经纬度
      function showInfo(e){
        that.mapPosition = e.point.lng + ", " + e.point.lat
      }
      this.map.addEventListener("click", showInfo);
      })
},


// 3.通过检索地名在地图上标记并且获取经纬度
setPlace(){
        let that = this
        this.map.clearOverlays();   //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
            that.mapPosition = pp.lng + ", " + pp.lat
            that.map.centerAndZoom(pp, 18);
            that.map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(this.map, { //智能搜索
          onSearchComplete: myFun
        });
        local.search(this.addr);  //addr代表检索地名
    }