uniapp 谷歌地图画圆会一直叠加怎么处理

记录一下写项目的过程的遇到的一些问题以及解决办法

问题：

用uniapp生成APP，在nvue页面用uniapp的m内置组件map组件，用的是谷歌地图，实现在地图上画圆。但是数据一刷新或者多次切换中心位置，明明只设置了一个圆，但是多个圆叠加了的问题。

解决办法：

在uni的文档中，仔细研究了一遍地图组件的文件，最后被我找到了一个可以替代的处理方案，那就是自定义图层，这个需要一张图片，还有经纬度的范围，那岂不是就和圆差不多。

addGroundOverlay：新增

updateGroundOverlay：更新

removeGroundOverlay：移除

有这么几个方法，不就是随便写了

圆可以用一张图片来替代。

那现在问题就是经纬度的范围怎么计算的问题了，网上找到的一些算法会把圆压缩成一个椭圆，最后在谷歌文档发现有对应的经纬度范围计算算法，然后在npm发现有人将这个计算算法抽出来弄成js库-spherical-geometry-js，最后用这个库解决了计算经纬度范围的问题。

库的链接： spherical-geometry-js

计算代码：

import { computeOffset } from "spherical-geometry-js";
// 获取边界范围，传入圆的中心点的经纬度，和半径（以m为单位）
const getBounds = (
  latValue: string | number,
  lngValue: string | number,
  radius: number
): boundsType => {
  console.log("radius", radius);
  const lat = Number(latValue);
  const lng = Number(lngValue);
  const n = computeOffset({ lat, lng }, radius, 0);
  const s = computeOffset({ lat, lng }, radius, 180);
  const w = computeOffset({ lat, lng }, radius, -90);
  const e = computeOffset({ lat, lng }, radius, 90);
  return {
    northeast: {
      latitude: n.lat(),
      longitude: e.lng(),
    },
    southwest: {
      latitude: s.lat(),
      longitude: w.lng(),
    },
  };
};

那么这个圆的问题算是完美解决了，但是我这个方法只是属于要展示特定颜色的圆，那种随机颜色的就得另想方法了。

最后：

这个问题是只有ios的app才会出现的，所以只需要ios的情况就好，以及要更新圆的话，通过updateGroundOverlay来处理好一点，直接更新圆的中心位置，半径就行。我试过每次更新删除之后在新建，会出现多个圆的情况。

最后的最后，希望能早点解决这个bug（如果解决了那就是更好了）。