在Google地图的某个点周围绘制半径 [英] Draw radius around a point in Google map

问题描述

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

我发现了一个看起来不错的例子，您也可以看看Google Latitude。在那里，他们使用半径标记，就像我想要的那样。 更新：Google Latitude使用缩小的图像，这将如何工作？

  //创建记号
 var marker = new google.maps.Marker（{
 map：map，
 position：new google.maps.LatLng（53，-2.5），
 title：'Some location'
}）; 
 
 //添加圈子叠加并绑定到记号
 var circle = new google.maps.Circle（{
 map：map，
 radius：16093，//以英尺计10英里
 fillColor：'＃AA0000'
}）; 
 circle.bindTo（'center'，marker，'position'）; 
  

您可以通过更改fillColor，strokeColor，strokeWeight等来使其看起来像谷歌纵横圈一样完整的API ）。

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

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?

解决方案

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');

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

See more source code and example screenshots.

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