Google Maps JS API - 根據縮放級別調整所有自定義標記的大小

Question

這是一個相當常見的問題，但我發現的所有答案都只適用於一個標記，我在女巫中的 jsfiddle 上有一個示例我在地圖上放置了 4 個標記（這只是例如 porpuses，在我的真實場景中的位置標記來自 API 源）。 我可以“只”更改一個標記的大小，然后放大，並且無法找到將其復制到所有標記的方法，因此還有另一種解決方法，我希望能提供一些線索。

 /** declare map as a global variable */
var map;
      

  /** create map   */
  
  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  /*  add markers to map   */

   var icon = {
          url: "https://www.dropbox.com/s/nx8bz4yobukzb9v/sonangol_marker.png?dl=1",
          size: new google.maps.Size(50, 58),
          scaledSize: new google.maps.Size(20, 28),
          origin: new google.maps.Point(0,0), // origin
          anchor: new google.maps.Point(10, 28) // anchor
        }
   var places = ['33.808678', '33.808978', '33.809278', '33.809578'] 
    
    for (var i = 0; i < 4; i++) {
        marker = new google.maps.Marker({
        position: new google.maps.LatLng(places[i], -117.918921),
        map: map,
        icon: icon
       });
    }
    
    map.addListener('zoom_changed', () => {
    
            //set the icon with the new size to the marker
      if (map.zoom>=20) {
             marker.icon.scaledSize = new google.maps.Size(50,58 );
             marker.icon.anchor = new google.maps.Point(25,58);
             }
      else if (map.zoom>=16) {
             marker.icon.scaledSize = new google.maps.Size(40,48 );
             marker.icon.anchor = new google.maps.Point(20,48);
             }
      else if (map.zoom>=13) {
             marker.icon.scaledSize = new google.maps.Size(30,38 );
             marker.icon.anchor = new google.maps.Point(15,38);
             }
      else if (map.zoom>=7) {
             marker.icon.scaledSize = new google.maps.Size(20,28 );
             marker.icon.anchor = new google.maps.Point(10,28);
             }
      else if (map.zoom>=5) {
             marker.icon.scaledSize = new google.maps.Size(10,18);
             marker.icon.anchor = new google.maps.Point(5,18);
            }
      else {
             marker.icon.scaledSize = new google.maps.Size(5,9);
             marker.icon.anchor = new google.maps.Point(2.5,9);
            }
      marker.setMap(map);
      //console.log(marker.icon);
    

      });

演示在這里。 要檢查它，只需運行 jsfiddle 演示並放大地圖。

Answer 1

您需要保留對所有標記的引用，通過該數組更新大小。 如果您有很多標記，這將需要一段時間。

map.addListener('zoom_changed', () => {
  let scaledSize;
  let anchor;
  //set the icon with the new size to the marker
  if (map.zoom >= 20) {
    scaledSize = new google.maps.Size(50, 58);
    anchor = new google.maps.Point(25, 58);
  } else if (map.zoom >= 16) {
    scaledSize = new google.maps.Size(40, 48);
    anchor = new google.maps.Point(20, 48);
  } else if (map.zoom >= 13) {
    scaledSize = new google.maps.Size(30, 38);
    anchor = new google.maps.Point(15, 38);
  } else if (map.zoom >= 7) {
    scaledSize = new google.maps.Size(20, 28);
    anchor = new google.maps.Point(10, 28);
  } else if (map.zoom >= 5) {
    scaledSize = new google.maps.Size(10, 18);
    anchor = new google.maps.Point(5, 18);
  } else {
    scaledSize = new google.maps.Size(5, 9);
    anchor = new google.maps.Point(2.5, 9);
  }
  for (var i = 0; i < markers.length; i++) {
    var icon = markers[i].getIcon();
    icon.scaledSize = scaledSize;
    icon.anchor = anchor;
    markers[i].setIcon(icon);
  }
});

更新的小提琴

代碼片段：

 /** declare map as a global variable */ var map; /** create map */ var map = new google.maps.Map(document.getElementById("map_div"), { center: new google.maps.LatLng(33.808678, -117.918921), zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP }); /* add markers to map */ var icon = { url: "https://irdp.bmc-hosting.com/assets/img/sonangol_marker.png", size: new google.maps.Size(50, 58), scaledSize: new google.maps.Size(20, 28), origin: new google.maps.Point(0, 0), // origin anchor: new google.maps.Point(10, 28) // anchor } var places = [{lat: 33.808678,lng: -117.918921},{lat: 33.808978, lng: -117.918921},{lat: 33.809278, lng: -117.918921},{lat: 33.809578, lng: -117.918921},{lat: 33.809578, lng: -117.908921},] var markers = []; for (var i = 0; i < places.length; i++) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(places[i], ), map: map, icon: icon }); markers.push(marker); } map.addListener('zoom_changed', () => { let scaledSize; let anchor; //set the icon with the new size to the marker if (map.zoom >= 20) { scaledSize = new google.maps.Size(50, 58); anchor = new google.maps.Point(25, 58); } else if (map.zoom >= 16) { scaledSize = new google.maps.Size(40, 48); anchor = new google.maps.Point(20, 48); } else if (map.zoom >= 13) { scaledSize = new google.maps.Size(30, 38); anchor = new google.maps.Point(15, 38); } else if (map.zoom >= 7) { scaledSize = new google.maps.Size(20, 28); anchor = new google.maps.Point(10, 28); } else if (map.zoom >= 5) { scaledSize = new google.maps.Size(10, 18); anchor = new google.maps.Point(5, 18); } else { scaledSize = new google.maps.Size(5, 9); anchor = new google.maps.Point(2.5, 9); } for (var i = 0; i < markers.length; i++) { var icon = markers[i].getIcon(); icon.scaledSize = scaledSize; icon.anchor = anchor; markers[i].setIcon(icon); } });

 html, body { height: 100%; width: 100%; margin: 0; padding: 0; font: 12px sans-serif; } h1, p { margin: 0; padding: 0; } #map_div { height: 100%; width: 100%; }

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map_div"></div>