删除先前的路线路线谷歌地图 [英] Remove previous Directions Route Google Maps

问题描述

我试图从信息窗口计划一条路线，但是我无法
去除以前的设置路线。我试过setMap（null），但它没有
的工作。我正在使用事件侦听器的回调，因为我需要传递从api调用返回的参数。一种选择是在每个事件上使用新的google.maps.map，例如（链接）标记，但当页面加载时，我的标记已经放置。

  element = document.getElementById（'map-canvas'）; 
 map = new google.maps.Map（element，options）; 
 var marker = new google.maps.Marker（{
 position：new google.maps.LatLng（car.lat，car.long），
 map：map，
 title ：car.make 
}）; 
 google.maps.event.addListener（标记，'click'，directionsCallback（car））; 
函数directionsCallback（car）{
返回函数（e）{
 if（infowindow！= null）{
 infowindow.close（）; 
} 
 var directionsService = new google.maps.DirectionsService（）; 
 directionsDisplay = new google.maps.DirectionsRenderer（）; 
 directionsDisplay.setMap（null）; 
 console.log（directionsDisplay）; 
 calcRoute = function（）{
 var startPoint = document.getElementById（'clientAddress'）.value; 
 var finishPoint = new google.maps.LatLng（car.lat，car.long）; 
 var request = {
 origin：startPoint，
 destination：finishPoint，
 travelMode：google.maps.TravelMode.DRIVING 
}; 
 directionsService.route（request，function（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 directionsDisplay.setMap（map）; 
 （方向显示）
 console.log（response.routes.length）
 infowindow.close（）; 
} 
其他{
 alert（'抱歉！'+ givenAddress +'not recognized'）
} 
}）; 
} 
 infowindow = new google.maps.InfoWindow（）; 
 infowindow.setContent（\\\

 +'此处的路线：< input id = \'client address''placeholder = \'Postcode or City \type = \ 'text \'>'
 +'< input type = \'button\'onClick = calcRoute（）value = \'Go！\'>'）
 infowindow .open（map，this）; 
 
 
 
 $ b  

解决方案

define directionsDisplay 只有一次（在点击 -handler之外）

Hi, I am trying to plan a route from the info window, but i am unable to remove the previous set route. I tried setMap(null) but it didn't work. I am using a callback for an event listener as i need to pass parameter which is returned from an api call. One option is to use new google.maps.map on each event e.g (link) on marker but than my markers are already placed when the page loads.

element = document.getElementById('map-canvas');
map = new google.maps.Map(element, options);
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(car.lat, car.long),
    map: map,
    title: car.make
});
google.maps.event.addListener(marker, 'click', directionsCallback(car));
function directionsCallback(car) {
    return function (e) {
        if( infowindow != null ) {
            infowindow.close();
        }
        var directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setMap(null);
        console.log(directionsDisplay);
        calcRoute = function(){
            var startPoint = document.getElementById('clientAddress').value;
            var finishPoint = new google.maps.LatLng(car.lat, car.long);
            var request = {
                origin: startPoint,
                destination: finishPoint,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setMap(map);
                    directionsDisplay.setDirections(response);
                    console.log(directionsDisplay)
                    console.log(response.routes.length)
                    infowindow.close();
                }
                else{
                    alert('Sorry ! ' + givenAddress + ' not recognized')
                }
            });
        }
        infowindow = new google.maps.InfoWindow();
        infowindow.setContent("\n"
            + 'Directions to here : <input id = \'clientAddress\'       placeholder=\"Postcode or City\" type=\'text\'>'
            + ' <input type=\'button\' onClick=calcRoute() value=\'Go!\'>')
        infowindow.open(map, this);


    }
}

解决方案

define directionsDisplay only 1 time(outside of the click-handler)

这篇关于删除先前的路线路线谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！