Google Maps JS API v3 单个标记多个圆圈答案

【问题标题】：Google Maps JS API v3 Single marker Multiple circlesGoogle Maps JS API v3 单个标记多个圆圈
【发布时间】：2013-02-23 20:23:32
【问题描述】：

截图：http://imageshack.us/a/img59/8541/72825985.png

以上结果是由多个标记（具有不同半径）在同一地点传递的。

我想一次拖动一个标记，而不是多个标记。

其次，信息窗口可用于不同的半径。

非常感谢任何帮助！

var locations = [
  ['US gov suggested', 1.8833, 102.7833, 5, 'green', 80000],
  ['agricultural contamination', 1.8833, 102.7833, 4, 'blue', 60000],
  ['Chernobyl_Exclusion_Zone (fallout)', 1.8833, 102.7833, 3, 'yellow', 30000],
  ['Fukushima evacuation zone', 1.8833, 102.7833, 2, 'red', 20000],
  ['emergency zone', 1.8833, 102.7833, 1, 'black', 5000]

];

和

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    draggable: true,
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));

var circle = new google.maps.Circle({
      map: map,
      fillColor:locations[i][4],
      //fillOpacity:0.3, 
      //strokeColor:locations[i][4],
      strokeOpacity:0.1,
      //strokeWeight:1,
      radius: locations[i][5] // 30 km
});

circle.bindTo('center', marker, 'position');

}

参考资料： Google Maps JS API v3 - Simple Multiple Marker Example

http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/circle-overlay/circle-overlay.html?r=67

http://plugins.svn.wordpress.org/google-maps-v3-shortcode-multiple-markers/trunk/

【问题讨论】：

标签： google-maps-api-3 google-maps-markers infowindow

【解决方案1】：

创建任意数量的圆圈，并使用圆圈的bindTo() 方法将每个圆圈的center-属性绑定到标记的position-属性

【讨论】：

【解决方案2】：

var infowindow = new google.maps.InfoWindow()

var marker, i;
  marker = new google.maps.Marker({
  position: new google.maps.LatLng(locations[0][1], locations[0][2]),
  draggable: true,
  map: map
  });

for (i = 0; i < locations.length; i++) {  

  var circle = new google.maps.Circle({
    map: map,
    clickable:true,
    fillColor:locations[i][4],
    //fillOpacity:0.3, 
    //strokeColor:locations[i][4],
    strokeOpacity:0.1,
    //strokeWeight:1,
    radius: locations[i][5] // 30 km
  });

circle.bindTo('center', marker, 'position');

其次，为多个圆圈叠加添加infowindow并不容易。有什么想法或提示吗？例如http://img443.imageshack.us/img443/8198/overlap.jpg

参考：google maps v3 adding an info window to a circle

【讨论】：