谷歌地圖刪除所有標記，然后創建新標記
[英]Google maps delete all markers and then create new
問題描述
我正在創建一個地圖，默認情況下加載地址並在搜索框中顯示標記和地址，這很好。 但我需要添加將首先刪除所有標記然后放置標記的click事件。 到目前為止，我是開發腳本，完成我所需要的一切。 但是，當用戶點擊地圖時，搜索框會獲取地址，但舊標記不會刪除，並且新標記不會顯示在點擊位置。
這是我的工作示例代碼： 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.添加標記后，單擊到附近位置結果：不刪除舊標記並且不顯示新標記。 預期結果：舊標記刪除並顯示新標記。
1 個解決方案
解決方案1
3 已采納
你需要改變：
// 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(map, 'click', 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
}));
有：
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>
Google Maps Ajax新標記
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.