1

データセットのインデックス（1、2、3、4 ..）を使用して縮小する半径を使用して、円が表示されているGoogleマップがあります。

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

マップのズームに基づいて円の半径を制御する方法はありますか?

4

2 に答える 2

4

Google マップにはzoom_changedイベントがあります。これを購読して、 CirclesetRadiusでメソッドを呼び出すことができます。もちろん、円の大きさに応じて関数を自分で定義する必要がありますgetCustomRadiusForZoom

  google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoomLevel = map.getZoom();
    cityCircle.setRadius(getCustomRadiusForZoom(zoomLevel));
  });
于 2013-02-26T17:00:13.933 に答える