Vue：编辑 gmap 自定义标记

Question

我们需要在 Vue 中为 google 地图构建一组自定义标记，可以在地图上发生变化时重复使用。地图上将有 100 多个标记，地图一次在屏幕上的可见时间将超过 3 小时。删除和添加标记不是一个选项，因为 Google 地图会随着时间流逝内存并导致浏览器崩溃。

Answer 1

我们通过破坏并重新构建 Vue 来解决这个问题。（有点）

我们所做的是在 GMap 组件 中构建一个 Container 组件。这个容器组件 包含一个值组件 的列表。每个 Value components 都是使用 #ref 的目标。

// Container component
<template>
  <div>
    <div v-for="index in markerNumber" :key="index">
      <ValuesComponent :ref="'mk_' + index" />
    </div>
  </div>
</template>


// script
editMarker(counter, lat, lng, icon){
  const name = 'mk_' + counter
    if (typeof this.$refs[name] !== 'undefined') {
      this.$refs[name][0].lat = lat // targets the lat of the Value component
      this.$refs[name][0].lng = lng
      this.$refs[name][0].icon = icon
    }
}



// Values component
<template>
  <GmapCustomMarker
    :marker="{ 'lat': lat, 'lng': lng }"
  >
    <svg-icon :icon="icon" />
  </GmapCustomMarker>
</template>

// script
  data: function() {
    return {
      lat: 0,
      lng: 0,
      icon: ''
    }
  }

这些值组件包含自定义标记组件和一组值，这些值决定自定义标记 看起来和它的位置。通过更改这些值，您可以通过其反应变量更改标记。此 Value components 中的值设置为 0 和空白，因此，尽管它们不可见，但它们确实存在。对于较大的值集，这会使映射速度很慢。

Value 组件 的管理由 Container 组件 完成。它首先将所有 Value 组件 置零，然后从顶部填充它们，直到用完标记（如果您管理 Value 组件，则不应发生这种情况数量不错）。

通过这样做，您不会一直删除和创建标记，这意味着数据泄漏已停止。

这是我们目前的做事方式。如果你有更好的建议，我想听听。

Vue：编辑 gmap 自定义标记

Vue: Editing a gmap custom marker

google-maps

google-maps-markers

vue.js