vue3中使用GoogleMap中的删除标记问题

问题描述

        现有states.onlineMarkers保存当前用户marker标记。

const states = reactive({
  onlineMarkers: {}
});

        GoogleMap中添加标记的API： 

marker.setMap(map)

        现在需要将指定的某个点从Google地图上移除，需要使用到官方文档中的API：

marker.setMap(null)

         使用后发现的标记仍然显示在地图上。

解决方案

        分析：我们存储的onlineMarkers数据，vue3将它们转换为Proxy对象。当我们调用marker.setMap(null)的时候，代理对象不是原来最初添加到映射的对象。

        解决方法：

import {toRaw} from 'vue';

// toRaw()在使用任何转换为Proxy对象的 Google 地图对象之前使用
toRaw(states.onlineMarkers[uid]).setMap(null)

// 上述为隐藏该标记，若需要删除标记，还需要多做一步把数据删除
Reflect.deleteProperty(states.onlineMarkers, `${uid}`)