Google Maps API - 为什么标签没有标记动画？

Question

我创建了一个谷歌地图并添加了一些标记.每个标记具有单字母标签("A","B","C").然后我为每个标记设置动画以进行反弹.

这一切都很好用一个令人讨厌的例外:标签("A","B","C")不会与标记一起反弹,所以看起来很奇怪.

JS/jQuery如下.我这里还有一个代码笔来显示问题.

有关如何使标签与标记一起弹跳的任何建议？

$(function () {

    var map;
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var labelIndex = 0;
    var markers = [];
    // Map locations
    var mapLocations = [{
        "name": "Windwood Hollow Park",
            "description": "This is the description for location 1",
            "position": {
            "lat": 33.942253,
            "lng": -84.278242
        }
    }, {
        "name": "Peeler Road Linear Park",
            "description": "This is the description for location 2",
            "position": {
            "lat": 33.940143,
            "lng": -84.278394
        }
    }, {
        "name": "Winters Chapel Animal Hospital",
            "description": "This is the description for location 3",
            "position": {
            "lat": 33.940707,
            "lng": -84.272021
        }
    }];

    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 33.943345,
            lng: -84.280186
        },
        zoom: 15
    });

    for (var j = 0; j < mapLocations.length; j++) {

        var currentLabel = labels[labelIndex++ % labels.length];

        // Create a map marker
        var marker = new google.maps.Marker({
            position: mapLocations[j].position,
            map: map,
            title: mapLocations[j].name,
            label: currentLabel
        });
        marker.setAnimation(google.maps.Animation.BOUNCE);
    }
});

Answer 1

标签似乎不会与标记图标一起弹起。为了实现有弹性的标签，我建议您应该使用图标本身带有标签字符的标记图标。Image Charts api（已弃用）提供动态自定义图标。

动态图标的示例为： http: //chart.apis.google.com/chart?chst= d_map_pin_letter&chld=A|FF9900，其中 chld=anyletter（此处为 A），最后 6 个字符是十六进制颜色代码（此处为 FF9900）。

已弃用的图表 API 允许为标记设置自定义颜色和标签。新的图表 API 放弃了对动态图标的支持。

另外，谷歌还保留了一些自定义图标

maps.google.com/mapfiles/marker" + 字母 + ".png

其中letter是任何字母表。例如： http: //maps.google.com/mapfiles/markerA.png

自定义图标也可通过https://code.google.com/p/google-maps-icons/wiki/NumericIcons获得

设置标记对象的图标属性

var marker = new google.maps.Marker({
            position: mapLocations[j].position,
            map: map,
            title: mapLocations[j].name,
            icon: "http://maps.google.com/mapfiles/marker" + letter + ".png"
    });

更新了 CodePen