css - 定义具有缩放相关大小的 Google map 标记图标

Question

在 Google Maps API 中为标记定义自定义图标时，图标的大小保持不变，与缩放级别无关。

是否可以设置一个属性，不仅 map 被放大，而且缩放到它时图像也被放大？

如果这不可能，是否有其他方法可以实现？也许只是在标记点设置图像？

Answer 1

你不能通过 CSS 做到这一点。大多数时候，标记直接绘制在 Canvas 上。

使用 JS，您将保存对所有标记的引用，然后在缩放时循环遍历所有标记:

 markers.forEach(function(marker) {
    var icon = new google.maps.Icon({
                      url:        'yourMarkerIconURL',
                      size:       'yourSize',
                      scaledSize: 'scaledSize'
                   })
    marker.setIcon(icon)
 })

您想使用 scaledSize 或 size 来控制标记图标的大小。