谷歌地图删除以前的路线并绘制新路线

2023-12-30

目前我遇到了一个问题。我使用并更改了示例 API 来绘制两点的路线。 A点是当前位置。 B 点是多个标记的位置之一。这些标记的创建我称之为附近搜索功能。

function showInfoWindow() {
    var marker = this;
    places.getDetails({
            placeId: marker.placeResult.place_id
        },
        function(place, status) {
            if (status !== google.maps.places.PlacesServiceStatus.OK) {
                return;
            }
            infoWindow.open(map, marker);
            buildIWContent(place);
        });
    var clickLat = marker.position.lat();
    var clickLon = marker.position.lng();
    var directionsDisplay = new google.maps.DirectionsRenderer({
        map: map
    });
    var directionsService = new google.maps.DirectionsService();
    showRoute(clickLat, clickLon, directionsDisplay, directionsService);
}

function showRoute(clickLat, clickLon, directionsDisplay, directionsService) {
    var pointA = {
        lat: currentLat,
        lng: currentLon
    };
    var pointB = {
        lat: clickLat,
        lng: clickLon
    };


    directionsDisplay.setOptions({
        suppressMarkers: true
    });

    //directionsDisplay.setMap(map);
    //directionsDisplay.setDirections({ routes: [] });
    // Set destination, origin and travel mode.
    var request = {
        destination: pointB,
        origin: pointA,
        travelMode: google.maps.TravelMode.DRIVING
    };
    //directionsDisplay.setMap(null);
    // Pass the directions request to the directions service.  
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            // Display the route on the map.
            //directionsDisplay.set('directions', null);

            //directionsDisplay.setMap(map);
            //directionsDisplay.setDirections({ routes: [] });
            directionsDisplay.setDirections(response);

        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });

}

这些代码已经可以绘制两个点的路线。但问题是,当我单击一个标记调用 showInfoWindow() 时,它将绘制一条路线,而单击另一个标记时,它将再次调用 showInfoWindow() ,它将绘制另一条保留前一条路线的路线。我想清除上一条路线一条路线。网上的方法都试过了,没找到原因。


如果您希望一次在地图上显示一种路线结果,则仅创建并使用该路线的一个实例DirectionsRenderer https://developers.google.com/maps/documentation/javascript/reference#DirectionsRenderer,当前您为每个结果创建一个新的DirectionsService.

概念证明小提琴 http://jsfiddle.net/q9r49f3m/2/

代码片段:

var geocoder;
var map;
var places;
var infoWindow = new google.maps.InfoWindow();
//Jersey City, NJ, USA
var currentLat = 40.7281575;
var currentLon = -74.0776417;
// global reference to the DirectionsRenderer
var directionsDisplay;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  places = new google.maps.places.PlacesService(map);
  // initialize the global DirectionsRenderer
  directionsDisplay = new google.maps.DirectionsRenderer({
    map: map
  });
  var marker1 = new google.maps.Marker({ /* New York, NY, USA */
    position: {
      lat: 40.7127837,
      lng: -74.0059413
    },
    placeResult: {
      place_id: "ChIJOwg_06VPwokRYv534QaPC8g"
    },
    map: map
  });
  google.maps.event.addListener(marker1, 'click', showInfoWindow);
  var marker2 = new google.maps.Marker({ /* Newark, NJ, USA */
    position: {
      lat: 40.735657,
      lng: -74.1723667
    },
    placeResult: {
      place_id: "ChIJHQ6aMnBTwokRc-T-3CrcvOE"
    },
    map: map
  });
  google.maps.event.addListener(marker2, 'click', showInfoWindow);
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(marker1.getPosition());
  bounds.extend(marker2.getPosition());
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

function showInfoWindow() {
  var marker = this;
  places.getDetails({
      placeId: marker.placeResult.place_id
    },

    function(place, status) {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        return;
      }
      infoWindow.open(map, marker);
      buildIWContent(place);
    });
  var clickLat = marker.position.lat();
  var clickLon = marker.position.lng();
  var directionsService = new google.maps.DirectionsService();
  showRoute(clickLat, clickLon, directionsDisplay, directionsService);
}

function showRoute(clickLat, clickLon, directionsDisplay, directionsService) {
  var pointA = {
    lat: currentLat,
    lng: currentLon
  };
  var pointB = {
    lat: clickLat,
    lng: clickLon
  };


  directionsDisplay.setOptions({
    suppressMarkers: true
  });

  //directionsDisplay.setMap(map);
  //directionsDisplay.setDirections({ routes: [] });
  // Set destination, origin and travel mode.
  var request = {
    destination: pointB,
    origin: pointA,
    travelMode: google.maps.TravelMode.DRIVING
  };
  //directionsDisplay.setMap(null);
  // Pass the directions request to the directions service.  
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      // Display the route on the map.
      //directionsDisplay.set('directions', null);

      //directionsDisplay.setMap(map);
      //directionsDisplay.setDirections({ routes: [] });
      directionsDisplay.setDirections(response);

    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });

}
html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

谷歌地图删除以前的路线并绘制新路线 的相关文章