谷歌地图删除所有标记，然后创建新标记 [英] Google maps delete all markers and then create new
本文介绍了谷歌地图删除所有标记，然后创建新标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个地图，默认情况下会加载地址并在搜索框中显示标记和地址，这样可以正常工作。但我需要添加将首先删除所有标记然后放置标记的click事件。到目前为止，我是开发脚本，完成我所需要的一切。但是，当用户点击地图时，搜索框会获取地址，但旧标记不会删除，并且新标记不会显示在点击位置。
I'm working to create a map, that by default loads the address and shows tha marker and place address in search box, that works fine. But I need to add the click event that will delete all markers first and then put the marker. As so far I was develop script that do all I need. But when user clicks on map, the searchbox gets place address but the old marker doesn't delete and new marker doesn't appears in the click location.
此处我的工作示例代码：
https://jsfiddle.net/ehsLLg26/
Here my working example code: https://jsfiddle.net/ehsLLg26/
这里我的代码：
<script type="text/javascript">
function initAutocomplete() {
var myOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
}
var map;
var marker;
var geocoder = new google.maps.Geocoder();
var address = document.getElementById('pac-input').value;
var infowindow = new google.maps.InfoWindow();
geocoder.geocode( { address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
//create map
map = new google.maps.Map(document.getElementById("map"), myOptions);
//center map
map.setCenter(results[0].geometry.location);
//create marker
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: document.getElementById('pac-input').value,
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current maps viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
marker.setMap(null);
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
google.maps.event.addListener(map, 'click', function(event) {
geocoder.geocode({
'latLng': event.latLng
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
document.getElementById('pac-input').value = results[0].formatted_address;
}
}
});
placeMarker(event.latLng);
});
function placeMarker(location) {
if (marker) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: place.geometry.location,
map: map,
title: place.name,
});
}
}
}
}
else {
$('#map').css({'height' : '15px'});
$('#map').html("Oops! address could not be found, please make sure the address is correct.");
resizeIframe();
}
});
function resizeIframe() {
var me = window.name;
if (me) {
var iframes = parent.document.getElementsByName(me);
if (iframes && iframes.length == 1) {
height = document.body.offsetHeight;
iframes[0].style.height = height + "px";
}
}
}
}
</script>
如何重现问题：
1.运行脚本
2.在搜索框键入任何地址，然后单击输入
3.添加标记后，单击到附近位置
结果：旧标记未删除，新标记未显示。
预期结果：删除旧标记并显示新标记。
How to reproduce issue: 1. Run the script 2. In search box type any address, then click enter 3. After the marker is added, click to nearby location Result: The old marker is not deleted and the new marker is not show. Expected result: Old marker deletes and the new marker appear.
推荐答案
您需要更改：
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
marker.setMap(null);
markers = [];
到
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
并使 google.maps.event.addListener（地图，'点击' ，function（event）{
google.maps.event.addListener(map, 'click', function(event) {
geocoder.geocode({
'latLng': event.latLng
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
markers.forEach(function(marker) {
marker.setMap(null);
})
document.getElementById('pac-input').value = results[0].formatted_address;
}
}
});
placeMarker(event.latLng);
});
编辑：
替换：
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
title: place.name,
position: place.geometry.location
}));
with：
placeMarker(place.geometry.location)
JSFiddle：
function initAutocomplete() {
var myOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
}
var map;
var marker;
var geocoder = new google.maps.Geocoder();
var address = document.getElementById('pac-input').value;
var infowindow = new google.maps.InfoWindow();
var markers = [];
geocoder.geocode({
address: address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
//create map
map = new google.maps.Map(document.getElementById("map"), myOptions);
//center map
map.setCenter(results[0].geometry.location);
//create marker
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: document.getElementById('pac-input').value,
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current maps viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
placeMarker(place.geometry.location)
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
google.maps.event.addListener(map, 'click', function(event) {
geocoder.geocode({
'latLng': event.latLng
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
markers.forEach(function(marker) {
marker.setMap(null);
});
document.getElementById('pac-input').value = results[0].formatted_address;
placeMarker(event.latLng);
}
}
});
});
function placeMarker(location) {
if (marker) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: place.geometry.location,
map: map,
title: place.name,
});
}
}
}
} else {
$('#map').css({
'height': '15px'
});
$('#map').html("Oops! address could not be found, please make sure the address is correct.");
resizeIframe();
}
});
function resizeIframe() {
var me = window.name;
if (me) {
var iframes = parent.document.getElementsByName(me);
if (iframes && iframes.length == 1) {
height = document.body.offsetHeight;
iframes[0].style.height = height + "px";
}
}
}
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZbI5EJHVyNPd07tdhGgIODBpuqCePlIw&libraries=places&callback=initAutocomplete">
</script>
这篇关于谷歌地图删除所有标记，然后创建新标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
