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

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

阅读 3.3k
2 个回答

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

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

  1. 首先,创建一个 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();
      }
    });
  },
});
  1. 接下来,在 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>
  1. 最后,在 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;
    },
  },
});

这个示例中,InfoWindow 的数据(如标题和内容)会自动更新,而不需要直接操作 DOM。当我们点击地图上的标记时,InfoWindow 会显示或隐藏,同时显示当前 Vue 实例中的数据。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题