我正在创建一个地图，默认情况下会加载地址并在搜索框中显示标记和地址，这样可以正常工作。但我需要添加将首先删除所有标记然后放置标记的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.添加标记后，单击附近位置 结果：未删除旧标记，并且未显示新标记。 预期结果：旧标记删除并显示新标记。
答案 0 :(得分：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>