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

Question

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

我发现了一个看起来不错的示例,您也可以查看谷歌纵横.在那里他们使用半径的标记,就像我想要的那样.

更新:谷歌纵横使用缩放的图像,这将如何工作？

Answer 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等(完整API)使其看起来像谷歌纬度圈.

查看更多源代码和示例屏幕截图.

Answer 2

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

Answer 3

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

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

话虽如此,意识到谷歌地图将地球投射到一个平坦的表面上(想想"展开"地球并伸展+展平直到它看起来"正方形").如果你有一个平面坐标系,你可以随意绘制2D对象.

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

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