如何从GoogleMapsAPI中的静态数组中删除特定标记
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何从GoogleMapsAPI中的静态数组中删除特定标记相关的知识，希望对你有一定的参考价值。
我正在学习Google Maps API，并且我使用了一些示例代码来构建带有一些标记的地图。我想通过双击按钮删除特定标记，但我无法理解如何构造此删除功能
有谁知道如何做到这一点？
这是我的代码：
<div id="map"></div>
<script type="text/javascript">
function initMap() {
var locations = [
['sidewalk problem', -25.438421, -49.268500, 4],
['sidewalk problem', -25.437188, -49.269629, 5],
['sidewalk problem', -25.432213, -49.257521, 3],
['sidewalk problem',-25.433337, -49.275717,2],
['sidewalk problem',-25.435546, -49.278635,1],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(-25.438421, -49.268500),
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
locations[i][4]
= marker
= new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
position = i;
}
})(marker, i));
}
答案
由于您正在绘制多个位置，我相信每个Google Maps Javascript API Marker都会更好，您创建的自定义属性“id”将其推入“标记数组”。
然后使用循环遍历每个数组值（标记）及其索引。有了这个，你将附加一个Google Maps Javascript API Events'dblclick'来删除该特定标记。
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
id : i,
title : 'Marker ID: '+i
});
markers.push(marker);
markers[i].addListener('dblclick',function(e){
markers[this.id].setMap(null);
});
}
我在下面创建了一个示例演示，其中在触发'dblclick'事件后将删除特定标记。此应用程序还具有删除'dblclick'上的特定标记的按钮，具体取决于其指定的标记索引。
var map;
var markers = [];
function initMap() {
var locations = [
['sidewalk problem', -25.438421, -49.268500, 4],
['sidewalk problem', -25.437188, -49.269629, 5],
['sidewalk problem', -25.432213, -49.257521, 3],
['sidewalk problem',-25.433337, -49.275717,2],
['sidewalk problem',-25.435546, -49.278635,1],
];
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-25.438421, -49.268500),
zoom: 15
});
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
id : i,
title : 'Marker ID: '+i
});
markers.push(marker);
markers[i].addListener('dblclick',function(e){
markers[this.id].setMap(null);
});
}
document.getElementById( 'button1' ).addEventListener( 'dblclick', function(){
markers[0].setMap(null);
});
document.getElementById( 'button2' ).addEventListener( 'dblclick', function(){
markers[1].setMap(null);
});
document.getElementById( 'button3' ).addEventListener( 'dblclick', function(){
markers[2].setMap(null);
});
document.getElementById( 'button4' ).addEventListener( 'dblclick', function(){
markers[3].setMap(null);
});
document.getElementById( 'button5' ).addEventListener( 'dblclick', function(){
markers[4].setMap(null);
});
} #map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 22%;
z-index: 5;
background-color: #FFF;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
} <div id="floating-panel">
<button id="button1">Delete Marker ID 0</button>
<button id="button2">Delete Marker ID 1</button>
<button id="button3">Delete Marker ID 2</button>
<button id="button4">Delete Marker ID 3</button>
<button id="button5">Delete Marker ID 4</button>
</div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=initMap"
async defer></script>以上是关于如何从GoogleMapsAPI中的静态数组中删除特定标记的主要内容，如果未能解决你的问题，请参考以下文章
如何从 Actionscript 3.0 中的数组 B 中的数组 A 中删除元素？