Google Maps animieren bestimmte Marker auf Klick

-1

Ich habe diese Google Map-Code unten, wo ich Bounce-Animation auf "Klicken" auf die Marker, aber wenn ich auf einen Marker nur der erste Marker ist animiert anstelle dieser bestimmten Marker.Google Maps animieren bestimmte Marker auf Klick

Ich habe ein paar Antworten versucht, aber sie scheinen nicht zu funktionieren.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#map { 
    height: 400px; 
    width: 100%; 
} 
</style> 
</head> 
<body> 
<h3>My Google Maps Demo</h3> 
<div id="map"></div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 

    function initMap() { 
     var locations = [ 
        ['Bondi Beach', -33.890542, 151.274856, 4], 
        ['Coogee Beach', -33.923036, 151.259052, 5], 
        ['Cronulla Beach', -34.028249, 151.157507, 3], 
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
        ['Maroubra Beach', -33.950198, 151.259302, 1] 
       ]; 
     var map = new google.maps.Map(document.getElementById('map'), { 

     zoom: 8, 
        //custom map styling 
     styles: [ 
        {elementType: 'geometry', stylers: [{color: '#ececec'}]}, 
        {elementType: 'labels.text.stroke', stylers: [{color: '#000000'}]}, 
        {elementType: 'labels.text.fill', stylers: [{color: '#000000'}]}, 
        { 
         featureType: 'administrative.locality', 
         elementType: 'labels.text.fill', 
         stylers: [{color: '#ffffff'}] 
         }, 
         { 
          featureType: 'poi', 
          elementType: 'labels.text.fill', 
          stylers: [{color: '#777777'}] 
         }, 
         { 
          featureType: 'poi.park', 
          elementType: 'geometry', 
          stylers: [{color: '#bebdbd'}] 
         }, 
         { 
          featureType: 'poi.park', 
          elementType: 'labels.text.fill', 
          stylers: [{color: '#a4a2a2'}] 
         }, 
         { 
          featureType: 'road', 
          elementType: 'geometry', 
          stylers: [{color: '#38414e'}] 
         }, 
         { 
          featureType: 'road', 
          elementType: 'geometry.stroke', 
          stylers: [{color: '#212a37'}] 
         }, 
         { 
          featureType: 'road', 
          elementType: 'labels.text.fill', 
          stylers: [{color: '#9ca5b3'}] 
         }, 
         { 
          featureType: 'road.highway', 
          elementType: 'geometry', 
          stylers: [{color: '#ffffff'}] 
         }, 
         { 
          featureType: 'road.highway', 
          elementType: 'geometry.stroke', 
          stylers: [{color: '#1f2835'}] 
         }, 
         { 
          featureType: 'road.highway', 
          elementType: 'labels.text.fill', 
          stylers: [{color: '#f3d19c'}] 
         }, 
         { 
          featureType: 'transit', 
          elementType: 'geometry', 
          stylers: [{color: '#999999'}] 
         }, 
         { 
          featureType: 'transit.station', 
          elementType: 'labels.text.fill', 
          stylers: [{color: '#777777'}] 
         }, 
         { 
          featureType: 'water', 
          elementType: 'geometry', 
          stylers: [{color: '#cccccc'}] 
         }, 
         { 
          featureType: 'water', 
          elementType: 'labels.text.fill', 
          stylers: [{color: '#e8e9ea'}] 
         }, 
         { 
          featureType: 'water', 
          elementType: 'labels.text.stroke', 
          stylers: [{color: '#cccccc'}] 
         }, 
         { 
          featureType: 'landscape.natural', 
          elementType: 'geometry', 
          stylers: [{color: '#000000'}] 
         } 

         ], 
        //map positioning and type  
        center: new google.maps.LatLng(-33.92, 151.25), 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        disableDefaultUI: true 
       }); 
        var infowindow = new google.maps.InfoWindow(); 

       var marker, i; 

       for (i = 0; i < locations.length; i++) { 

         marker = new google.maps.Marker({ 
         animation: google.maps.Animation.DROP, 

         position: new google.maps.LatLng(locations[i][1], locations[i][2]), 

         map: map, 

         }); 
         //event listener for popup 
         google.maps.event.addListener(marker, 'click', (function(marker, i) { 
         return function() { 
          infowindow.setContent(locations[i][0]); 
          infowindow.open(map, marker); 
         } 
         })(marker, i)); 

         //event listener for bounce animation 
         google.maps.event.addListener(marker, 'click', function() { 
          if (marker.getAnimation() != null) { 
           marker.setAnimation(null); 
          } else { 
           marker.setAnimation(google.maps.Animation.BOUNCE); 
          } 
          }); 

       } 






     } 




    </script> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAwQB2GuZ2oDC2tP2A_6XwlEraV2Cyku3E&callback=initMap"></script> 
</body> 
</html>

Quelle

2016-11-22 Ravi Sharma

Sie haben zwei Ereignis-Listener für das Marker-Klickereignis eingerichtet. Ich schätze, der, der Ihr Infofenster öffnet, funktioniert gut. Verwenden Sie den gleichen Ansatz mit dem zweiten. Oder noch besser, Sie haben nur einen einzigen Ereignis-Listener, der beide Funktionen ausführt.

marker.addListener('click', (function(marker, i) { 
    return function() { 
     if (marker.getAnimation() != null) { 
      marker.setAnimation(null); 
     } else { 
      marker.setAnimation(google.maps.Animation.BOUNCE); 
     } 

     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker); 
    } 
})(marker, i));

Quelle

2016-11-22 11:47:36 duncan

danke ... es funktioniert jetzt perfekt. –

Google Maps animieren bestimmte Marker auf Klick

Antwort

Verwandte Themen