点击事件始终使用最后一个标记

我刚开始使用Google Maps API，并且无法为Rails中的每个标记设置单击事件。我遍历team_locations模型来获取纬度和经度数据并设置每个标记。我将事件监听器放置在循环中，因此每个标记都设置了一个监听器，但单击时，地图始终放大并聚焦我team_locations表中的最后一个项目。我认为这是因为我的标记变量不断更新，而列表中的最后一项是它的设置。有没有什么好的解决方法？点击事件始终使用最后一个标记

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

来源

2016-06-26 Shwheelz

尽管以下示例仅使用javascript，但希望它能帮助您。将每个标记放入数组中，然后添加事件侦听器。

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

来源

2016-06-27 05:54:10 MKiss

谢谢;标记数组做了诡计！ – Shwheelz

点击事件始终使用最后一个标记

回答

相关问题