jquery - 谷歌地图，基于缩放比例圈

Question

我有一个显示圆圈的谷歌地图，使用的半径使用数据集的索引（1、2、3、4..）按比例缩小：

 var radiusTest = 1 - (mapDataTrending[i].index) * .1;

 var populationOptions = {
  strokeColor: "#fdb913",
  strokeOpacity: 0.35,
  strokeWeight: 1,
  fillColor: "#fdb913",
  fillOpacity: 0.35,
  map: map,
  center: new google.maps.LatLng(mapDataTrending[i].lat, mapDataTrending[i].lng),
  radius: radiusTest * 800
};

cityCircle = new google.maps.Circle(populationOptions);

我想如果用户放大时圆圈没有变大。圆圈随着用户缩放而缩放，如果用户放大到像 20 这样的整数，我希望它们不会变大。

这是我制作地图的方式：

var mapOptions = {
    center: new google.maps.LatLng(30.26826, -97.743044),
    zoom: 14,
    panControl: false,
    zoomControl: false,
    scaleControl: false,
    disableDefaultUI: true,
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
};

map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

有没有办法可以根据地图缩放控制圆半径？

Answer 1

谷歌地图有一个zoom_changed事件，你可以订阅这个并在你的CirclesetRadius上调用该方法。当然，您必须根据圆圈的大小自己定义函数getCustomRadiusForZoom

  google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoomLevel = map.getZoom();
    cityCircle.setRadius(getCustomRadiusForZoom(zoomLevel));
  });

Answer 2

如果您想要一个在不同缩放级别下保持相同大小的圆圈，最好使用符号。

如本例所示，默认情况下，它们使用缩放级别缩放大小。您还可以选择设置普通圆具有的属性，例如fillColor和strokeOpacity。

从我链接的示例中：

var marker = new google.maps.Marker({
  position: map.getCenter(),
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 10
  },
  draggable: true,
  map: map
});