Google Maps JS API-根据缩放级别调整所有自定义标记的大小

编程问答 2022-06-03

问题描述

这是一个相当普遍的问题，但我发现的所有答案都只能使用一个标记，我在jsfiddle中的一个例子中，在女巫中我在地图上放置了4个标记（在我的真实场景中，这是例如豚鼠）标记的位置来自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],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);
    

      });

演示为here。 要检查它，只需运行jsfiddle演示并在地图上进行放大。

解决方法

您需要保留对所有标记的引用，并通过该数组进行处理以更新大小。如果您有很多标记，这将需要一段时间。

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

updated fiddle

代码段： 

/** 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,{lat: 33.809278,{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',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>

gmaps.jsgoogle-maps