在谷歌地图中围绕一个点绘制半径

Posted 2023-02-24

技术标签:

【中文标题】在谷歌地图中围绕一个点绘制半径【英文标题】：Draw radius around a point in Google map 【发布时间】：2010-10-23 23:19:17 【问题描述】：

我正在使用 Google Maps API 并添加了标记。现在我想在每个标记周围添加一个 10 英里的半径，这意味着一个在缩放时表现适当的圆圈。我不知道该怎么做，而且这似乎并不常见。

I found one example that looks good，你也可以看看谷歌纵横。他们在那里使用带半径的标记，就像我想要的那样。

更新：谷歌纵横使用 an image 进行缩放，它是如何工作的？ _{^{（功能已弃用）}子>}

【问题讨论】：

如果有用，可以看到一个例子here，带有可拖动的半径。 【参考方案1】：

使用 Google Maps API V3，创建一个 Circle 对象，然后使用 bindTo() 将其绑定到您的 Marker 的位置（因为它们都是 google.maps.MVCObject 实例）。

// Create marker 
var marker = new google.maps.Marker(
  map: map,
  position: new google.maps.LatLng(53, -2.5),
  title: 'Some location'
);

// Add circle overlay and bind to marker
var circle = new google.maps.Circle(
  map: map,
  radius: 16093,    // 10 miles in metres
  fillColor: '#AA0000'
);
circle.bindTo('center', marker, 'position');

您可以通过更改 fillColor、strokeColor、strokeWeight 等 (full API) 使其看起来像 Google Latitude 圆圈。

查看更多source code and example screenshots。

【讨论】：

Google maps API web.archive.org/web/20120312044803/http://code.google.com/apis/…的“Fun with MVC objects”一文中也有一个很好的例子【参考方案2】：

似乎实现这一点最常用的方法是绘制一个GPolygon，它有足够的点来模拟一个圆。您引用的示例使用此方法。 This page 有一个很好的例子 - 在源代码中查找函数 drawCircle。

【讨论】：

你好 @Chris B esa.ilmari.googlepages.com/circle.htm 是一个很好的链接，但是它是在 V2 中完成的，你能提供 v3 代码吗？？？【参考方案3】：

在球面几何形状中，形状由点、线和这些线之间的角度定义。你只有那些基本的价值观可以使用。

因此，圆（根据投影到球体上的形状）是必须使用点近似的东西。点越多，它看起来就越像一个圆圈。

话虽如此，请意识到谷歌地图是projecting the earth onto a flat surface（想想“展开”地球并拉伸+展平直到它看起来“方形”）。如果你有一个平面坐标系，你可以在上面绘制任何你想要的 2D 对象。

换句话说，您可以在谷歌地图上绘制一个缩放的矢量圆圈。问题是，谷歌地图并没有开箱即用（他们希望尽可能接近 GIS 值）。他们只给你GPolygon，他们希望你用它来近似一个圆。但是，this guy did it 将 vml 用于 IE，将 svg 用于其他浏览器（请参阅“SCALED CIRCLES”部分）。

现在，回到您关于使用缩放圆形图像的 Google 纵横的问题（这可能对您最有用）：如果您知道您的圆的半径永远不会改变（例如，它总是围绕某个点 10 英里)，那么最简单的解决方案是使用GGroundOverlay，它只是一个图像 url + 图像所代表的 GLatLngBounds。然后，您需要做的唯一工作是计算GLatLngBounds 代表您的 10 英里半径。一旦你有了它，谷歌地图 api 会在用户放大和缩小时处理你的图像。

【讨论】：

很好的答案。 IOW 意味着换句话说，OOTB 意味着开箱即用，对于那些需要像我一样查找它的人。【参考方案4】：

我以前遇到过这个问题，所以我收藏了这个discussion.

总结一下，你可以：

php

【讨论】：

【参考方案5】：

我刚刚写了一篇博客文章来解决这个问题，你可能会发现它很有用： http://seewah.blogspot.com/2009/10/circle-overlay-on-google-map.html

基本上，您需要使用正确的 GLatLngBounds 创建一个 GGroundOverlay。棘手的一点是根据所需的半径计算这个想象正方形（GLatLngBounds）包围这个圆的西南角坐标和东北角坐标。数学相当复杂，但您可以参考博客中的 getDestLatLng 函数。其余的应该很简单。

【讨论】：

【参考方案6】：

有关 API v3 解决方案，请参阅：