在 Google 地图中将圆圈叠加到纬度/经度和半径答案

【问题标题】：Map circle overlay to lat/lng and radius in Google Maps在 Google 地图中将圆圈叠加到纬度/经度和半径
【发布时间】：2021-04-26 20:38:05
【问题描述】：

我创建了一个叠加层，我想使用它来允许用户在地图上选择一个区域。问题是我需要将屏幕中间 300px 高度和宽度圆圈的位置映射到我绘制圆圈时有意义的位置。

这是我尝试过的：

  const circle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map: mapRef.current,
      center: mapRef.current.getCenter(),
      radius: 100000 / (mapRef.current.getZoom() * mapRef.current.getZoom()),
    });

我认为中心应该只是地图的中心，但问题是半径。我试图只插入一些值，但永远无法匹配。

有人能引导我走向正确的方向吗？

【问题讨论】：

标签： javascript typescript google-maps google-maps-api-3

【解决方案1】：

您需要以 lat/lng 为单位获取边界框，然后以像素为单位获取容器的宽度。纵向宽度的比率除以容器的宽度，乘以 500 将得到您想要的半径：

const elementWidth = 1000 // actual value
const mapBounds = mapRef.current.getBounds()
const radius = 500 * Mah.abs(mapBounds.getNorthEast().lng() - mapBounds.getSouthWest().lng()) / elementWidth

【讨论】：