我正在尝试显示一个信息窗口（或者如果您有更好的主意），该信息窗口中将包含一个可点击的链接，一旦单击该链接，它将删除标记。将有多个标记，所有标记都是动态创建的，我希望每个标记都将其删除。我尝试了一些在这里和那里收集的代码，但是没有运气
<!DOCTYPE html>
<html>
<head>
<title>Google maps test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="searchBox">
<input type="text" id="someInput"/>
<button onclick="onSendClicked()">Send</button>
</div>
<div id="map"></div>
<script>
var map;
//var tempMarker;
function onSendClicked(){
var textBox = document.getElementById("someInput");
var input = textBox.value;
var geoCoder = new google.maps.Geocoder();
geoCoder.geocode({'address':input}, function(results, status){
if (status == google.maps.GeocoderStatus.OK){
//if (tempMarker){
// tempMarker.setMap(null);
// google.maps.event.clearListeners(tempMarker, 'click');
//}
var location = results[0].geometry.location;
map.setCenter(location);
var tempMarker = new google.maps.Marker({
position: location,
map: map
});
map.setZoom(15);
var div = document.createElement("div");
div.innerHTML = div.innerHTML + input;
var br = document.createElement("br");
div.appendChild(br);
var aLink = document.createElement("a");
aLink.onClick = function(){
removeMarker(tempMarker);
}
aLink.innerText = "Remove marker";
div.appendChild(aLink);
var infoWindowHomeAddress = new google.maps.InfoWindow({
content: div
});
tempMarker.addListener('click',function(){
infoWindowHomeAddress.open(tempMarker.get('map'), tempMarker);
});
}
});
}
function removeMarker(marker){
google.maps.event.clearListeners(marker, 'click');
marker.setMap(null);
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 32.005255, lng: 34.797488},
zoom: 15
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5Sx8aiOG14-XC7HJuSlEKAlzSnkhfnbw&callback=initMap"
async defer></script>
</body>
</html>
我也尝试了div.outerHTML，但这没有给出我需要的单击事件。
感谢@Novice，我设法解决了这个问题。
代码示例根据此问题进行更新。
这是完整的解决方案：
<!DOCTYPE html>
<html>
<head>
<title>Google maps test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="searchBox">
<input type="text" id="someInput"/>
<button onclick="onSendClicked()">Send</button>
</div>
<div id="map"></div>
<script>
var map;
var counter = -1;
var markers = [];
function onSendClicked(){
var textBox = document.getElementById("someInput");
var input = textBox.value;
var geoCoder = new google.maps.Geocoder();
geoCoder.geocode({'address':input}, function(results, status){
if (status == google.maps.GeocoderStatus.OK){
//if (tempMarker){
// tempMarker.setMap(null);
// google.maps.event.clearListeners(tempMarker, 'click');
//}
counter++;
var location = results[0].geometry.location;
map.setCenter(location);
var tempMarker = new google.maps.Marker({
position: location,
map: map,
id: counter
});
map.setZoom(15);
var infoWindowHomeAddress = new google.maps.InfoWindow({
content: input + "<br/><a href='#' onclick='removeMarker(" + counter + ");'>Remove marker</a>"
});
tempMarker.addListener('click',function(){
infoWindowHomeAddress.open(tempMarker.get('map'), tempMarker);
});
markers.push(tempMarker);
}
});
}
function removeMarker(markerId){
var marker = markers[markerId];
google.maps.event.clearListeners(marker, 'click');
marker.setMap(null);
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 32.005255, lng: 34.797488},
zoom: 15
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5Sx8aiOG14-XC7HJuSlEKAlzSnkhfnbw&callback=initMap"
async defer></script>
</body>
</html>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句