Javascript 单击事件始终使用最后一个标记_Javascript_Ruby On Rails_Google Maps_Google Maps Api 3

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

javascript ruby-on-rails google-maps google-maps-api-3

Javascript 单击事件始终使用最后一个标记,javascript,ruby-on-rails,google-maps,google-maps-api-3,Javascript,Ruby On Rails,Google Maps,Google Maps Api 3,我刚开始使用GoogleMapsAPI，在Rails中为每个标记设置单击事件时遇到了问题。我正在迭代团队位置模型，以获取纬度和经度数据并设置每个标记。我将事件监听器放在循环中，这样每个标记都会设置一个监听器，但单击时，贴图总是缩放并以我的团队位置表中的最后一项为中心。我假设这是因为我的marker变量不断更新，列表中的最后一项是它设置的。有什么好的解决办法吗 <script> function initialize() { // Center the map

我刚开始使用GoogleMapsAPI，在Rails中为每个标记设置单击事件时遇到了问题。我正在迭代团队位置模型，以获取纬度和经度数据并设置每个标记。我将事件监听器放在循环中，这样每个标记都会设置一个监听器，但单击时，贴图总是缩放并以我的团队位置表中的最后一项为中心。我假设这是因为我的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>


函数初始化（）{
//把地图放在美国的中心
var center=newgoogle.maps.LatLng（37.09024，-95.712891）；
变量映射选项={
缩放：4，
中心:中心,，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“地图画布”），
地图选项）；
var teamLatLng=新的google.maps.LatLng（，）；
var marker=new google.maps.marker({
职位：teamLatLng，
地图：地图，
标签：“
});
google.maps.event.addListener（标记，'click'，函数（）{
map.setZoom（8）；
map.setCenter（marker.getPosition（））；
});
marker.setMap（map）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

尽管下面的示例只使用了

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>


地图
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图画布{
宽度：100%；
高度：400px；
}
var映射；
var标记；
var标记=[]；
var团队位置=[
{纬度：37.090200，经度：-95.712882，队号：1}，
{纬度：37.050710，经度：-95.675891，队号：2}，
{纬度：36.437308，经度：-95.978816，队号：3}
];
函数初始化（）{
var center=newgoogle.maps.LatLng（37.09024，-95.712891）；
变量映射选项={
缩放：4，
中心:中心,，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“地图画布”），
地图选项）；
对于（var i=0；i