Question

我有一个显示圆圈的Google地图，使用半径可以使用数据集的索引（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

Google地图有一个zoom_changed event，您可以订阅此地址并在Circle上调用setRadius方法。当然，你必须自己定义函数getCustomRadiusForZoom，具体取决于圆圈的大小

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

Answer 2

如果您想要一个在不同缩放级别保持相同大小的圆圈，最好选择documents。

如此symbols所示，默认情况下，它们会根据缩放级别缩放其大小。您还可以选择将example设置为普通圈，例如fillColor和strokeOpacity。

从我链接的示例：

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

properties

谷歌地图，基于缩放的比例圆

2 个答案: