Question

我是使用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>

Answer 1

虽然以下示例仅使用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>

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

1 个答案: