javascript - 添加标记后更改标记的 anchor

Question

创建谷歌地图标记时，将图标参数用作对象或字符串时，性能可能会有所不同。

负载:

new google.maps.Marker({
      position: { lat: this.lat, lng: this.lng },
      map: this.map,
      icon: {url: iconUrl, anchor: anchor: new google.maps.Point(8, 8)
});

比加载这个慢得多:

new google.maps.Marker({
      position: { lat: this.lat, lng: this.lng },
      map: this.map,
      icon: iconUrl
});

当加载大量点时可以看到它给出了 4500ms vs 400ms。

由于上面使用的图标是 16x16px 的圆， anchor 应该设置在 google.maps.Point(8, 8) 中。

是否有可能以不同的方式或在标记初始化之后设置 anchor ？ 我在谷歌地图文档中找到的唯一方法是在需要 url 参数的图标对象中传递 anchor 参数的方法。

示例(在控制台中查看生成时间):https://jsfiddle.net/ur76jckb/

无论图标是否为 base64、是否存储在本地、是否具有扩展名以及它的大小。只需将字段设置为对象或字符串就会有所不同。

谷歌地图 v3.34.16

Bug reported .

Answer 1

为了在创建标记后更改标记图标的 anchor ，您可以使用标记的 setOptions() 方法。

查看以下创建标记并在 3 秒延迟后更改其 anchor 的示例。

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.88, 151.28),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(-33.781552, 151.274846),
        map: map,
        icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
    });
    
    window.setTimeout(function() {
        marker.setOptions({
            icon: { url:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
                anchor: new google.maps.Point(16,16)
            }
            
        });
    }, 3000);
            

}

html, body, #map {
     height: 100%;
     width: 100%;
     margin: 0px;
     padding: 0px;
 }

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" type="text/javascript"></script>

希望对您有所帮助!