Google Maps API - 为什么不用标记标记动画？ [英] Google Maps API - Why don't labels animate along with markers?

问题描述

我创建了Google地图并添加了一些标记。每个标记都有一个单字母标签（A，B，C）。然后让每个标记动起来反弹。

这一切都可以正常工作，但有一个恼人的例外：标签（A，B，C）不会随着标记反弹，所以它看起来很奇怪。

JS / jQuery在下面。 我在这里也有一个代码笔，显示问题。

关于如何让标签和标记一起反弹的建议？

  $（function（）{
 
变种地图; 
变种标签= 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
变种labelIndex = 0; 
变种标记= []; 
 //地图位置
 var mapLocations = [{
name：Windwood Hollow Park，
description：这是位置1的描述，
position：{
lat：33.942253，
lng：-84.278242 
} 
}，{
name：皮勒路线性公园，
描述：这是位置2的描述，
位置：{
lat：33.940143，
lng：-84.278394 
} 
}，{
姓名：温特斯教堂动物医院， 
description：这是位置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 
}）; （var j = 0; j  
 var currentLabel = labels [labelIndex ++％labels.length]; 
 
; 
 
 //创建地图标记
 var marker = new google.maps.Marker（{
位置：mapLocations [j] .position，
 map：map， 
 title：mapLocations [j] .name，
 label：currentLabel 
}）; 
 marker.setAnimation（google.maps.Animation.BOUNCE）; 
} 
}）; 
  

解决方案

标签似乎没有随标记反弹图标。为了实现弹性标签，我建议你应该使用图标上带有标签字符的标记图标。 图表api （已弃用）
服务动态自定义图标。

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

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

或者，google还在
上维护了一些自定义图标

maps.google.com/mapfiles/marker+ letter +.png

其中 是任何字母。例如： 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，
图标：http://maps.google.com/mapfiles/marker+ letter + .png
}）; 
  

更新CodePen

I've created a Google Map and added a few markers to it. Each marker has a one-letter label ("A", "B", "C"). I then animate each marker to bounce.

That all works fine with one annoying exception: The labels ("A", "B", "C") don't bounce along with the marker, so it looks odd.

The JS/jQuery is below. I also have a code pen here showing the issue.

Any suggestions on how to have the labels bounce along with the markers?

$(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);
    }
});

解决方案

The labels don't seem to bounce with the marker icons. To achieve bouncy labels I would suggest that you should use marker icons that have the labelled character on the icon itself. Image Charts api(Deprecated) serves dynamic custom icons.

Example of dynamic icon would be: http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF9900 where chld=anyletter (here A) and the last 6 characters are hex color code(here FF9900).

Deprecated chart api allows to set custom colour and label for the marker. New charts api dropped the support for dynamic icons.

Alternatively google also maintains a few custom icons on

maps.google.com/mapfiles/marker" + letter + ".png

where letter is any alphabet. Eg: http://maps.google.com/mapfiles/markerA.png

Custom icons are also available with https://code.google.com/p/google-maps-icons/wiki/NumericIcons

Set the icon property of marker object

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"
    });

Updated CodePen

这篇关于Google Maps API - 为什么不用标记标记动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！