单击时获得相同的 Google 地图标记 ID
Getting the same Google Maps Marker id on click
我试图在单击 google 地图时获取单个标记的 id/index。
目前,我只得到相同的 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) 单击一个标记,然后单击另一个。
我想获取标记的索引,以便显示数组中与标记匹配的数据。
有人有什么想法吗?我认为这是因为循环覆盖了事件侦听器,我尝试将其移出但没有任何反应。
在"click"事件监听函数里面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>
我试图在单击 google 地图时获取单个标记的 id/index。
目前,我只得到相同的 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) 单击一个标记,然后单击另一个。
我想获取标记的索引,以便显示数组中与标记匹配的数据。
有人有什么想法吗?我认为这是因为循环覆盖了事件侦听器,我尝试将其移出但没有任何反应。
在"click"事件监听函数里面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>