在单击时获取相同的Google Maps Marker id
在单击时获取相同的Google Maps Marker id
提问于 2019-06-11 04:44:02
当我点击时，我正在尝试获取google地图上各个标记的id/索引。
目前，我只得到了一个相同的id: 4
这是一个JSFIDDLE
这里是我设置标记的地方：
function setMarkers(locations) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var loc = locations[i];
var currentLatLong = new google.maps.LatLng(loc[1], loc[2]);
var marker = new google.maps.Marker({
position: currentLatLong,
map: map,
index: i,
animation: google.maps.Animation.DROP,
title: loc[0],
zIndex: loc[3]
});
marker.addListener('click', function(e, i) {
var info = marker.index;
document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
});
bounds.extend(currentLatLong);
// Push marker to markers array
markers.push(marker);
}
map.fitBounds(bounds);
map.panToBounds(bounds);
}如何复制：
1)单击屏幕左侧的搜索按钮
2)单击一个标记，然后单击另一个标记。
我想要获得标记的索引，这样我就可以显示与标记匹配的数组中的数据。
有谁有什么想法吗？我认为这是因为循环覆盖了事件侦听器，我尝试将其移出，但随后什么也没有发生。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-11 06:35:38
在“单击”事件侦听器函数中，this引用被单击的标记，因此更改为：
marker.addListener('click', function(e, i) {
var info = marker.index;
document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
});至：
marker.addListener('click', function(e, i) {
var info = this.index;
document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
});(另一种选择是在marker变量上获得函数闭包，但这会增加更多开销)
代码片段：
var map;
var markers = [];
var initialEmptyMarkers = [];
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var infowindow = new google.maps.InfoWindow({
content: "Content"
});
function setMarkers(locations) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var loc = locations[i];
var currentLatLong = new google.maps.LatLng(loc[1], loc[2]);
var marker = new google.maps.Marker({
position: currentLatLong,
map: map,
index: i,
animation: google.maps.Animation.DROP,
title: loc[0],
zIndex: loc[3]
});
bounds.extend(currentLatLong);
marker.addListener('click', function(e, i) {
var info = this.index;
document.getElementById("markerInfo").innerHTML = "<h1>id:" + info + "</h1>";
});
// Push marker to markers array
markers.push(marker);
}
map.fitBounds(bounds);
map.panToBounds(bounds);
}
function reloadMarkers() {
// Loop through markers and set map to null for each
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
// Reset the markers array
markers = [];
// Call set markers to re-add markers
setMarkers(locations);
}
function initMap() {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(10, 12),
mapTypeId: google.maps.MapTypeId.MAP
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Bind event listener on button to reload markers
document.getElementById('searchButton').addEventListener('click', reloadMarkers);
}
initMap();html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#search {
position: absolute;
top: 150px;
left: 10px;
background-color: #fff;
z-index: 999;
padding: 20px;
}
#map {
height: 100%;
z-index: 1;
}
#markerInfo {
position: absolute;
bottom: 0;
left: 0;
height: 100px;
width: 100%;
background-color: #fff;
padding: 10px;
z-index: 999;
}<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<div id="map"></div>
<div id="search">
<input type="button" value="Search" id="searchButton">
</div>
<div id="markerInfo"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56533275
复制相关文章
相似问题