Google maps Vue：编辑gmap自定义标记

我们需要在Vue中为google地图构建一组自定义标记，这些标记可以在地图上发生变化时重用。地图上将有100多个标记，并且地图将在屏幕上一次显示3个多小时。删除和添加标记不是一个选项，因为谷歌地图会随着时间的推移耗尽内存并使浏览器崩溃。

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

我们所做的是在GMap组件内部构建一个容器组件。此容器组件包含值组件的列表。每个值组件都使用#ref作为目标

//容器组件
//剧本
editMarker（计数器、横向、液化天然气、图标）{
常量名称='mk_uz'+计数器
if（此类型的类型。$refs[name]！==“未定义”）{
此.$refs[name][0].lat=lat//以值组件的lat为目标
此.$refs[name][0].lng=lng
这是。$refs[name][0]。icon=icon
}
}
//值组件
//剧本
数据：函数（）{
返回{
纬度：0，
液化天然气：0，
图标：“”
}
}

这些值组件包含自定义标记组件和一组值，这些值确定了自定义标记的外观及其位置。通过更改这些值，可以通过其反应变量更改标记。此值组件中的值设置为0且为空，因此，尽管它们不可见，但它们仍然存在。对于较大的值集，这会使贴图速度非常慢

值组件的管理由容器组件完成。它首先将所有价值成分归零，然后从顶部填充它们，直到标记用完为止（如果管理好价值成分的数量，则不应出现这种情况）

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

---

这是我们目前的做事方式。如果您有更好的建议，我很乐意听听。

我们通过中断并重新构建Vue解决了这个问题。（有点）

我们所做的是在GMap组件内部构建一个容器组件。此容器组件包含值组件的列表。每个值组件都使用#ref作为目标

//容器组件
//剧本
editMarker（计数器、横向、液化天然气、图标）{
常量名称='mk_uz'+计数器
if（此类型的类型。$refs[name]！==“未定义”）{
此.$refs[name][0].lat=lat//以值组件的lat为目标
此.$refs[name][0].lng=lng
这是。$refs[name][0]。icon=icon
}
}
//值组件
//剧本
数据：函数（）{
返回{
纬度：0，
液化天然气：0，
图标：“”
}
}

这些值组件包含自定义标记组件和一组值，这些值确定了自定义标记的外观及其位置。通过更改这些值，可以通过其反应变量更改标记。此值组件中的值设置为0且为空，因此，尽管它们不可见，但它们仍然存在。对于较大的值集，这会使贴图速度非常慢

值组件的管理由容器组件完成。它首先将所有价值成分归零，然后从顶部填充它们，直到标记用完为止（如果管理好价值成分的数量，则不应出现这种情况）

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

---

这是我们目前的做事方式。如果您有更好的建议，我很乐意听听。

如果您使用集群，JavaScript API绝对可以处理显示100个（自定义）标记的映射：请参见，如果您使用集群，JavaScript API绝对可以处理显示100个（自定义）标记的映射：请参见

// 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: ''
    }
  }