改变方向时显示多个标记的地图

maps showing multiple markers when changing directions

本文关键字:地图 显示 改变方向      更新时间:2023-09-26

我在谷歌地图上显示方向,一切都很好。问题是,当我更新其中一个标记(出发或到达)时,会在地图上添加一个新标记,而不是删除以前的标记。我曾尝试将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: []});

这将在每次输入新方向时重置地图。