在谷歌地图中围绕一个点绘制半径 [英] Draw radius around a point in Google map

问题描述

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

I'm using the Google Maps API and have added markers. Now I want to add a 10 mile radius around each marker, meaning a circle that behaves appropriately while zooming. I have no idea how to do that and it seems it's not something common.

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

I found one example that looks good, and you can have a look at Google Latitude, too. There they use markers with a radius, just like I want them.

更新:谷歌纵横使用 一个图像 被缩放了，它会如何工作? _{^{(不推荐使用的功能)}}

Update: Google Latitude uses an image that is scaled, how would that work? _{^{(feature deprecated)}}

推荐答案

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

Using the Google Maps API V3, create a Circle object, then use bindTo() to tie it to the position of your Marker (since they are both google.maps.MVCObject instances).

// 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).

You can make it look just like the Google Latitude circle by changing the fillColor, strokeColor, strokeWeight etc (full API).

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

这篇关于在谷歌地图中围绕一个点绘制半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！