Klick-Ereignis verwendet immer letzten Marker

Ich bin neu in der Verwendung des Google Maps-APIs und habe Probleme beim Festlegen eines Klickereignisses für jeden Marker in Rails. Ich wiederhole das Modell von team_locations, um Breiten- und Längengraddaten zu erhalten und setze jeden Marker. Ich setze den Ereignis-Listener in die Schleife, so dass jeder Marker mit einem Listener eingerichtet wird, aber beim Klicken zoomt die Karte immer auf das letzte Element in meiner Tabelle team_locations. Ich nehme an, dass es passiert, weil meine Marker-Variable ständig aktualisiert wird, und das letzte Element in der Liste ist, was es festgelegt ist. Gibt es dafür gute Umgehungsmöglichkeiten?Klick-Ereignis verwendet immer letzten Marker

<script> 
    function initialize() { 
     // Center the map on the US 
     var center = new google.maps.LatLng(37.09024, -95.712891); 

     var mapOptions = { 
      zoom: 4, 
      center: center, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map-canvas"), 
       mapOptions); 

     <% @team_locations.size.times do |i| %> 
      var teamLatLng = new google.maps.LatLng(<%= @team_locations[i].latitude %>, <%= @team_locations[i].longitude %>); 
      var marker = new google.maps.Marker({ 
       position: teamLatLng, 
       map: map, 
       label: "<%= @team_locations[i].team_id %>" 
      }); 
      google.maps.event.addListener(marker,'click',function() { 
       map.setZoom(8); 
       map.setCenter(marker.getPosition()); 
      }); 
      marker.setMap(map); 
     <% end %> 


    } 
    google.maps.event.addDomListener(window, "load", initialize); 
</script>

Quelle

2016-06-26 Shwheelz

Obwohl das folgende Beispiel nur javascript verwenden, hoffentlich wird es Ihnen helfen. Setzen Sie jeden Ihrer Marker in ein Array, und fügen Sie Ereignislistener hinzu.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <script src="https://maps.googleapis.com/maps/api/js"></script>  
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map-canvas { 
     width: 100%; 
     height: 400px; 
     } 
    </style> 
    </head> 
<body> 
    <div id="map-canvas"></div> 
    <script type="text/javascript"> 
     var map; 
     var marker; 
     var markers = []; 
     var team_locations = [ 
       {latitude: 37.090200, longitude: -95.712882, team_id: 1}, 
       {latitude: 37.050710, longitude: -95.675891, team_id: 2}, 
       {latitude: 36.437308, longitude: -95.978816, team_id: 3} 
     ]; 
     function initialize() { 
      var center = new google.maps.LatLng(37.09024, -95.712891); 
      var mapOptions = { 
       zoom: 4, 
       center: center, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map-canvas"), 
        mapOptions); 

      for (var i = 0; i < team_locations.length; i++) { 
       var teamLatLng = new google.maps.LatLng(team_locations[i].latitude, team_locations[i].longitude); 
       marker = new google.maps.Marker({ 
        position: teamLatLng, 
        map: map, 
        label: team_locations[i].team_id.toString() 
       }); 
       markers.push(marker); 
       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 
         map.setZoom(8); 
         map.setCenter(markers[i].getPosition());      
        } 
        })(marker, i)); 
      } 
     } 
     google.maps.event.addDomListener(window, "load", initialize); 
    </script> 
</body> 
</html>

Quelle

2016-06-27 05:54:10 MKiss

Vielen Dank; das Marker-Array hat es geschafft! – Shwheelz

Klick-Ereignis verwendet immer letzten Marker

Antwort

Verwandte Themen