添加标记后更改标记的锚点

Question

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

负载：

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与400ms。

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

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

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

无论图标是否在base64中，是否存储在本地，它的扩展名以及它的大小。只需将字段设置为object或string就会有所不同。

Google地图v3.34.16

Bug reported。

Answer 1

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

看看下面的例子，它创建了一个标记，并在3秒的延迟后改变了它的锚点。

​

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>

​

我希望这能帮到你!