Google Maps API - Warum werden Labels nicht zusammen mit Markern animiert?

Question

Ich habe eine Google Map erstellt und ein paar Markierungen hinzugefügt. Jeder Marker hat eine Ein-Buchstaben-Bezeichnung ("A", "B", "C"). Ich animiere dann jeden Marker zum Bounce.

Das funktioniert alles mit einer lästigen Ausnahme: Die Etiketten ("A", "B", "C") hüpfen nicht zusammen mit dem Marker, so dass es seltsam aussieht.

Die JS/jQuery ist unten. I also have a code pen here showing the issue.

Irgendwelche Vorschläge, wie die Etiketten mit den Markern hüpfen können?

$(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

Die Etiketten scheinen nicht mit den Markersymbolen zu hüpfen. Um Hüpfetiketten zu erzielen, würde ich vorschlagen, dass Sie Markersymbole mit dem beschrifteten Zeichen auf dem Symbol selbst verwenden sollten. Image Charts api (veraltet) dient dynamische benutzerdefinierte Symbole.

Beispiel für dynamisches Symbol wäre: http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF9900 wo chld = anyletter (hier A) und die letzten 6 Zeichen hex Farbcode sind (hier FF9900).

Veraltete Diagramm-API ermöglicht benutzerdefinierte Farbe und Beschriftung für den Marker festzulegen. Neue Diagramme API hat die Unterstützung für dynamische Symbole fallengelassen.

Alternativ hält Google auch einige benutzerdefinierten Symbole auf

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

wo Brief jedes Alphabet ist. ZB: http://maps.google.com/mapfiles/markerA.png

Benutzerdefinierte Symbole sind auch mit https://code.google.com/p/google-maps-icons/wiki/NumericIcons

Stellen Sie das Symbol Eigenschaft Marker Objekt

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