Google Maps API路线服务问题：设置新路线后旧路线未清除

你遇到的核心问题是每次计算新路线时都创建了新的DirectionsRenderer实例，旧的实例没有被清除，导致旧路线一直叠加在地图上。之前尝试的directionsDisplay.setDirections({ routes: [] })没生效，是因为你在回调函数里重新声明了局部的directionsDisplay变量，覆盖了全局实例——相当于你操作的是一个全新的对象，根本没碰原来显示旧路线的那个实例。

具体修复步骤 #

• 复用全局的directionsDisplay实例，不要每次计算路线都新建
• 在计算新路线前，先清除旧路线的显示
• 移除回调里的局部directionsDisplay声明，避免覆盖全局变量

修改后的完整代码 #

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var route = [];

function initialize() {
 directionsDisplay = new google.maps.DirectionsRenderer();
 var chicago = new google.maps.LatLng(23.023292, 72.571144);
 var mapOptions = {
 zoom: 11,
 center: chicago
 };
 map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 directionsDisplay.setMap(map);
}

$(document).ready(function(){
 google.maps.event.addDomListener(window, 'load', initialize);
});

function calcRoute(data) {
 // 计算新路线前先清除旧路线
 if (directionsDisplay) {
   directionsDisplay.setDirections({ routes: [] });
 }

 if(data.length) {
 for (var key in data) {
 var track = data[key];
 var start = new google.maps.LatLng(track[0].latitude,track[0].longitude);
 var end = new google.maps.LatLng(track[track.length - 1].latitude,track[track.length - 1].longitude);
 var waypoints = track;
 waypoints.shift();
 waypoints.pop();
 var waypointsgoogle = [];
 for(var waykey in waypoints) {
 waypointsgoogle.push({
 location: new google.maps.LatLng(waypoints[waykey].latitude,waypoints[waykey].longitude),
 stopover: false
 });
 }
 directionsService.route({
 origin: start,
 destination: end,
 optimizeWaypoints:true,
 travelMode: google.maps.TravelMode.DRIVING,
 waypoints:waypointsgoogle
 }, function (response, status) {
 if (status == google.maps.DirectionsStatus.OK) {
   // 复用全局directionsDisplay实例，不再新建
   directionsDisplay.setOptions({
     preserveViewport: true,
     polylineOptions: {
       strokeColor: '#0089d0'
     }
   });
   directionsDisplay.setMap(map);
   directionsDisplay.setDirections(response);
 } else {
 alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
 }
 });
 }
 } else {
 // 无数据时移除地图上的路线显示
 if (directionsDisplay) {
   directionsDisplay.setMap(null);
 }
 }
}

关键改动说明 #

1. 在calcRoute函数开头添加旧路线清除逻辑，确保每次计算新路线前先清空之前的路线
2. 移除了回调里新建directionsDisplay的代码，改用全局实例操作
3. 将路线样式和视图选项通过setOptions方法设置到全局实例上
4. 补充了无数据场景的处理，直接把路线显示从地图上移除

这样修改后，每次切换用户路线时，旧路线会被彻底清除，地图上只会显示当前用户的路线。

内容的提问来源于stack exchange，提问作者Mit Makwana