我刚开始使用 Google Maps API，在为 Rails 中的每个标记设置点击事件时遇到问题。我正在迭代 team_locations 模型以获取纬度和经度数据并设置每个标记。我将事件监听器放在循环内，以便每个标记都设置有监听器，但单击时， map 始终会缩放并以 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>
最佳答案
尽管以下示例仅使用 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>
关于javascript - 单击事件始终使用最后一个标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38040608/