vue中使用高德地图，自定义InfoWindow，里边的数据如何自动更新?

Z时代
2024-03-11
分类：IT

如题。目前实现方式是在自定义InfoWindow中为标签添加ID，等数据改变后根据ID获取DOM，用原生js的方式来更新数据。这种操作原生DOM的理念和vue不符。是否有某种方式为InfoWindow中的数据实现双向绑定？

回答：

你可以使用vue-amap这个基于Vue 2.0和高德地图的地图组件，它可以让你在vue中更方便地使用高德地图的功能，包括自定义InfoWindow。在vue-amap中使用info-window标签来创建一个信息窗体，然后在其中使用slot插槽来放置你想要显示的内容，这样就可以实现双向绑定了。

回答：

可以通过 Vue.js 的自定义指令来实现高德地图 InfoWindow 的数据自动更新。这样一来，就不需要直接操作 DOM 了。下面是一个基本的例子，展示如何使用自定义指令实现 InfoWindow 的自动更新：

首先，创建一个 Vue.js 自定义指令，例如 v-info-window：

Vue.directive('info-window', {
  inserted: function (el, binding, vnode) {
    // 创建一个 InfoWindow
    const infoWindow = new AMap.InfoWindow({
      isCustom: true, // 使用自定义窗体
      content: el, // 指定 InfoWindow 的内容为当前元素
      offset: new AMap.Pixel(0, -30),
    });
    // 将 InfoWindow 保存到 Vue 实例的数据中
    vnode.context.$data.infoWindow = infoWindow;
    // 给 Vue 实例添加一个 watcher，以便在数据变化时更新 InfoWindow
    vnode.context.$watch(binding.expression, (newValue) => {
      if (newValue) {
        infoWindow.setContent(el);
        infoWindow.open(vnode.context.$data.map, vnode.context.$data.position);
      } else {
        infoWindow.close();
      }
    });
  },
});

接下来，在 Vue.js 模板中使用这个自定义指令，并传递需要双向绑定的数据：

<div id="app">
  <div ref="mapContainer" style="width: 100%; height: 400px;"></div>
  <div v-info-window="showInfoWindow" style="display: none">
    <div>
      <h3>{{ title }}</h3>
      <p>{{ content }}</p>
    </div>
  </div>
  <!-- 控制 InfoWindow 显示/隐藏的按钮 -->
  <button @click="toggleInfoWindow">显示/隐藏 InfoWindow</button>
</div>

最后，在 Vue 实例中设置所需的数据，并初始化高德地图：

new Vue({
  el: '#app',
  data: {
    map: null,
    position: null,
    infoWindow: null,
    showInfoWindow: false,
    title: '自定义标题',
    content: '自定义内容',
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 初始化高德地图
      this.map = new AMap.Map(this.$refs.mapContainer, {
        zoom: 15,
        center: [116.397428, 39.90923],
      });
      // 添加一个标记
      const marker = new AMap.Marker({
        position: this.map.getCenter(),
        map: this.map,
      });
      // 保存标记的位置
      this.position = marker.getPosition();
      // 监听标记的点击事件，显示/隐藏 InfoWindow
      marker.on('click', () => {
        this.toggleInfoWindow();
      });
    },
    toggleInfoWindow() {
      this.showInfoWindow = !this.showInfoWindow;
    },
  },
});