96

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

我找到了一个看起来不错的例子，你也可以看看谷歌纵横。他们在那里使用带有半径的标记，就像我想要的那样。

更新：谷歌纵横使用缩放的图像，它是如何工作的？ （功能已弃用）

4

6 回答 6

245

使用 Google Maps API V3，创建一个 Circle 对象，然后使用 bindTo() 将其绑定到标记的位置（因为它们都是 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 等（完整 API）使其看起来像 Google Latitude 圆圈。

查看更多源代码和示例截图。

于 2010-11-25T17:21:34.077 回答
10

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

于 2009-05-05T17:00:10.610 回答
9

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

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

话虽如此，请意识到谷歌地图正在将地球投影到平坦的表面上（想想“展开”地球并拉伸+展平直到它看起来“方形”）。如果你有一个平面坐标系，你可以随心所欲地在上面绘制 2D 对象。

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

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

于 2009-05-05T19:24:47.767 回答
4

我过去遇到过这个问题，所以我把这个讨论加入了书签。

总结一下，你可以：

  1. 看看这个圆形过滤器的源代码，并弄清楚如何将它合并到您的项目中。
  2. 用足够多的点绘制一个 GPolygon 来模拟一个圆。
  3. 修改http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024生成KML文件，然后导入。在 Google 地图中，您只需将 URI 粘贴到搜索框中，它就会显示在地图上。不过，我不确定您如何使用 API 来做到这一点。
于 2009-05-05T19:59:49.367 回答
2

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

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

于 2009-10-07T11:56:30.880 回答
2

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

http://blog.enbake.com/draw-circle-with-google-maps-api-v3

它围绕点创建圆圈，然后用不同的颜色显示范围内和范围外的标记。他们还计算动态半径，但在您的情况下，半径是固定的，因此工作量可能会减少。

于 2010-11-01T10:13:50.420 回答