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

Posted 2023-03-16

【中文标题】谷歌地图，基于缩放比例圈

【英文标题】：Google Maps, scale circle based on Zoom

【发布时间】：2013-02-26 15:52:14

【问题描述】：

我有一个显示圆圈的 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);

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

【参考方案1】：

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

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

【参考方案2】：

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

如example 所示，默认情况下，它们会随缩放级别缩放其大小。您还可以选择设置普通圆所具有的properties，例如fillColor 和strokeOpacity。

从我链接的例子中：

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