javascript - 谷歌地图 api v3 图标的双图像

Question

 var icon = {
                    url: pointer.png,
                    size: new google.maps.Size(48,48),
                    origin: new google.maps.Point(0,0),
                    anchor: new google.maps.Point(24,24)
                  };

var marker = new google.maps.Marker({
                    position: pos,
                    map: map,
                    icon: icon
                  });

是否可以将第二张图片添加到标记中？我想要相同点的双标记，1 个叠加在另一个之上。

我想在标记旁边有一个小国旗。

可能吗？

Answer 1

在 API v3.14 之前，您可以在同一个标​​记上使用 icon 和 shadow 图像文件来解决这个问题。

这是我用 v3.14+ 解决它的方法

function initialize() {
    google.maps.visualRefresh = true;
    var mapDiv = document.getElementById('map-canvas');
    var map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(0, 0),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(0, 0),
        map: map
    });

    // CREDIT: https://developers.google.com/maps/documentation/javascript/markers
    marker.flag = new google.maps.Marker({
        icon: {
            url: 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png',
            anchor: new google.maps.Point(32, 32)
        }
    });

    marker.flag.bindTo('position', marker);
    marker.flag.bindTo('map', marker);

}

google.maps.event.addDomListener(window, 'load', initialize);

参见:http://jsfiddle.net/stevejansen/J5swt/