vue项目中 百度地图拖拽功能

Question

目前是这样的，点击按钮出现百度组件的弹框，标注点可以移动，但是现在想实现的是移动标注点之后关闭弹框再打开标注点还是原来的位置。（之前标注点的经纬度是根据表格中row.lat,row.lng获得的）

<template>
  <div>
    <el-dialog
      width="55%"
      :visible.sync="visible"
      @close='closeDialog'>
      <div ref="map" class="baidu-map"></div>
      <span slot="footer" class="map-footer">
        <el-button type="primary" @click="updatePoint">修改坐标</el-button>
        <el-button type="primary" @click="calculateDistance">计算距离</el-button>
      </span>
    </el-dialog>
  </div>
  
</template>
<script>
export default {
  props: {
    visbible: {
      type: Boolean,
      default: true,
    },
    zoom: {
      type: Number,
      default: 15
    },
    center: {
      type: [Object, String],
      default () {
        return {lng: 116.404, lat: 39.915}
      }
    },
    marker: {
      type: [Object, String],
      default () {
        return {lng: 116.404, lat: 39.915}
      }
    },
  },
  data: () => ({
    ak: 'wAR8NqqVEPjFxZKmoD6tpMns6wv3ze9T',
    BMap: {},
    map: {},
    currentPosition: null
  }),
  methods: {
    init (BMap) {
      let $el = this.$refs.map
      const map = new BMap.Map($el)
      this.map = map
      // 初始化中心位置
      const {getCenterPoint, zoom} = this
      map.centerAndZoom(getCenterPoint(), zoom || 15)

      this.setMarker(this.marker);
      this.$emit('ready', {BMap, map})
    },

    // 初始化地图
    initMap (BMap) {
      this.BMap = BMap
      this.init(BMap)
    },

    // 加载百度地图API
    getMapScript () {
      if (!global.BMap) {
        const ak = this.ak || this._BMap().ak
        global.BMap = {}
        global.BMap._preloader = new Promise((resolve, reject) => {
          global._initBaiduMap = function () {
            resolve(global.BMap)
            global.document.body.removeChild($script)
            global.BMap._preloader = null
            global._initBaiduMap = null
          }
          const $script = document.createElement('script')
          global.document.body.appendChild($script)
          $script.src = `//api.map.baidu.com/api?v=2.0&ak=${ak}&callback=_initBaiduMap`
        })
        return global.BMap._preloader
      } else if (!global.BMap._preloader) {
        return Promise.resolve(global.BMap)
      } else {
        return global.BMap._preloader
      }
    },

    // 地图中心点
    getCenterPoint () {
      const {center, BMap} = this
      switch (typeof center) {
        case 'string':
          return center
        case 'object':
          return new BMap.Point(parseFloat(center.lng), parseFloat(center.lat))
        default: return new BMap.Point(116.404, 39.915)
      }
    },

    // 设置中心点
    setCenter () {
      const {map, getCenterPoint} = this
      map.setCenter(getCenterPoint())
    },

    // 设置Marker
    setMarker (p) {
      const {map, BMap} = this;
      var _this = this;
      map.clearOverlays(); // 清除地图上所有覆盖物
      const marker = new BMap.Marker(new BMap.Point(parseFloat(p.lng), parseFloat(p.lat))); // 创建标注
      map.addOverlay(marker); // 将标注添加到地图中
      marker.enableDragging(); // 可拖拽
      _this.currentPosition = p;
      marker.addEventListener('dragend', () => {
        var p = marker.getPosition();
        _this.currentPosition = {
          lng: p.lng,
          lat: p.lat
        }
      });
      map.enableScrollWheelZoom(true); //滚动缩放
    },
    updatePoint() {
      this.$emit('update-point', this.currentPosition);
    },
    calculateDistance() {
      this.$emit('cal-distance', this.currentPosition);
    },
    closeDialog () {
      this.visible = false
      this.$emit('closeDialog', false)
    },
  },
  created () {
    const {getMapScript, initMap} = this;
    getMapScript().then(initMap);
  }
}
</script>
<style>
.baidu-map {
  width: 100%;
  height: 660px;
  border: 1px solid #eee;
}
.map-footer .el-button--medium{
  margin-top: 8px;
}
</style>

Answer 1

地图拖动之后记录地图中心点经纬度坐标（或者标注点坐标），打开的时候利用保存的坐标来渲染，如果初始没有记录则用表格数据渲染