谷歌地圖點擊動畫特定標記點擊

-1

我有這個谷歌地圖代碼下面我添加了跳動動畫'點擊'標記，但當我點擊任何標記只有第一個標記是動畫而不是那個特定的標記。谷歌地圖點擊動畫特定標記點擊

我已經嘗試了幾個答案，但他們似乎並沒有工作。

<!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>

來源

2016-11-22 Ravi Sharma

您有2個事件偵聽器爲標記點擊事件設置。我猜想，打開你的infowindow工作正常。第二個使用相同的方法。或者更好，只需要一個事件監聽器來完成這兩個功能。

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

來源

2016-11-22 11:47:36 duncan

謝謝......它的工作現在完美了。 –

谷歌地圖點擊動畫特定標記點擊

回答

相關問題