Google Maps API - Dlaczego etykiety animowane razem ze znacznikami?

Question

Stworzyłem Mapę Google i dodałem do niej kilka znaczników. Każdy marker ma jednoliterową etykietę ("A", "B", "C"). Następnie animuję każdy znacznik do odbicia.

To wszystko działa dobrze z jednym irytującym wyjątkiem: Etykiety ("A", "B", "C") nie odbijają się wraz z markerem, więc wygląda dziwnie.

JS/jQuery znajduje się poniżej. I also have a code pen here showing the issue.

Jakieś sugestie dotyczące sposobu odrzucania etykiet wraz ze znacznikami?

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

Etykiety nie wydają się odbijać z ikon znacznika. Aby uzyskać bouncy labels, sugerowałbym używanie ikon znaczników, które mają znakowany znak na samej ikonie. Image Charts api (Przestarzałe) służy do dynamicznych niestandardowych ikon.

przykład dynamicznego ikona może być: http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF9900 gdzie CHLD = anyletter (tutaj) a ostatnie 6 znaków są heks Barwa (w tym FF9900).

Przestarzałe api wykresu pozwala ustawić własny kolor i etykietę znacznika. Nowe api listy przełożyły wsparcie dla dynamicznych ikon.

Alternatywnie google twierdzi również kilka niestandardowych ikon na

maps.google.com/mapfiles/marker "+ literę +" .png

gdzie list jest dowolny alfabet. Np: http://maps.google.com/mapfiles/markerA.png

niestandardowe ikony są również dostępne z https://code.google.com/p/google-maps-icons/wiki/NumericIcons

ustawić właściwość ikonę znacznika obiektu

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