谷歌地图JS API-根据缩放级别调整所有自定义标记的大小

Question

这是一个相当常见的问题，但我找到的所有答案都只适用于一个标记，我在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], -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);
}
});

更新的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, 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>