改变方向时显示多个标记的地图
maps showing multiple markers when changing directions
我在谷歌地图上显示方向,一切都很好。问题是,当我更新其中一个标记(出发或到达)时,会在地图上添加一个新标记,而不是删除以前的标记。我曾尝试将directionsDisplay设置为全局变量,但无法解决此问题。在显示新路线之前,有没有办法清除地图?
它看起来是这样的:
我也按照api上的建议进行了尝试:
directionDisplay = new google.maps.DirectionsRenderer();
directionDisplay.suppressMarkers = true;
directionDisplay.setMap(null);![enter image description here][1]
感谢的帮助
我的代码是
var map = drawMap(map, mapOptions);
var departure;
var arrival;
var marker = createMarker();
function mainMap(mapOptions) {
departure1 = '#autocomplete_departure';
arrival1 = '#autocomplete_arrival';
var placeDeparture = getAddress(departure1);
var placeArrival = getAddress(arrival1);
google.maps.event.addListener(placeDeparture, 'place_changed', function(){
placeMarker(placeDeparture, departure1);
});
google.maps.event.addListener(placeArrival, 'place_changed', function(){
placeMarker(placeArrival, arrival1);
});
};
function setMarkerPosition(marker, place){
marker.setPosition(place.geometry.location);
marker.setMap(map);
}
function drawMap(){
return new google.maps.Map(map, mapOptions);
}
function createMarker(){
var markerOptions = {
map: map
}
return new google.maps.Marker(markerOptions);
}
function placeMarker(place, stop){
var place = place.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPosition(place.geometry.location);
marker.setMap(map);
if (stop == '#autocomplete_departure') {
departure = stop;
} else if (stop == '#autocomplete_arrival') {
arrival = stop;
}
if (arrival !== undefined && departure !== undefined) {
updateRouteOnMap(arrival, departure);
}
function updateRouteOnMap(departure, arrival){
var from = $(departure).val();
var to = $(arrival).val();
var request = {
origin: from,
destination: to,
travelMode: google.maps.TravelMode.DRIVING
};
var directionsDisplay;
if (directionsDisplay != undefined) directionsDisplay.setMap(null);
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
$("#directions-panel").html()
directionsDisplay.setPanel(document.getElementById('directions-panel'));
}
else{
alert("there has been an error. Please try again!")
}
});
经过几次尝试,我终于找到了解决方案。
我将directionsDisplay和directionsService设置为全局变量,并在绘制地图之前添加以下代码:
directionsDisplay.setDirections({routes: []});
这将在每次输入新方向时重置地图。
相关文章:
- 张贴到地图显示的限制
- 谷歌地图显示灰色方框
- 无法让谷歌地图显示在我的网站上
- Google Maps Javascript API v3 地图显示在桌面浏览器上,但不会显示在移动浏览器上
- 双击谷歌地图显示提示框不起作用
- 谷歌地图显示钦奈(印度)使用javascript
- 使用 IMG 地图显示更大的图像
- 当缩放级别为 1 时,谷歌地图显示 kml(内部是图像 URL)不正确
- 无法让我的 openlayers 地图显示在网页上
- 谷歌地图显示没有jQuery
- 谷歌地图显示问题
- 谷歌/必应地图显示所有城市
- Esri 地图显示信息窗口,无需单击地图
- 必应地图显示地图的左上角的北美
- 谷歌地图显示KML数据
- 谷歌地图显示新请求后的旧方向
- 谷歌地图显示什么,直到我最小化屏幕
- 谷歌地图显示多个地图而不是一个
- 为什么谷歌地图显示灰色,而没有初始化缩放&当使用jQuery按钮更改缩放时,居中,地图上的居中效果非常好
- 谷歌地图显示标题的信息框