在Google地图中的某个点周围绘制半径

时间:2009-05-05 16:35:56

标签: javascript google-maps

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

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

更新:谷歌纵横使用缩放的an image,该怎么办?

6 个答案:

答案 0 :(得分:225)

使用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)使其看起来像谷歌纵横圈。

查看更多source code and example screenshots

答案 1 :(得分:10)

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

答案 2 :(得分:9)

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

因此,圆形(就投射到球体上的形状而言)是必须使用点近似的东西。点越多,它就越像圆圈。

话虽如此,意识到谷歌地图是projecting the earth onto a flat surface(想想“展开”地球并伸展+展平直到看起来“正方形”)。如果你有一个平面坐标系,你可以随意绘制2D对象。

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

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

答案 3 :(得分:4)

我过去遇到过这个问题,所以我将此标记为discussion.

总结一下,你可以:

  1. 查看这个circle filter的源代码,并弄清楚如何将其合并到您的项目中。
  2. 绘制具有足够点的GPolygon以模拟圆圈。
  3. 通过修改http://www.nearby.org.uk/google/circle.kml.php?radius=30miles&lat=40.173&long=-105.1024然后导入KML文件来生成KML文件。在Google地图中,您只需将URI粘贴到搜索框中,它就会显示在地图上。我不知道如何使用API​​来实现它。

答案 4 :(得分:2)

有关API v3解决方案,请参阅:

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

它在点周围创建圆,然后用不同颜色显示范围内外的标记。它们还计算动态半径,但在你的情况下,半径是固定的,因此工作量可能较少。

答案 5 :(得分:1)

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

基本上,您需要使用正确的GLatLngBounds创建GGroundOverlay。棘手的一点是根据所需的半径计算出这个圈子的西南角坐标和东北角坐标(GLatLngBounds)。数学很复杂,但你可以在博客中引用getDestLatLng函数。其余的应该非常简单。