这个问题在这里已经有了答案:
remove route with google map
(8 个回答)
6年前关闭。
我正在使用 DirectionsRenderer 来显示路径,但在完成之后我想删除折线并继续进行操作。我似乎无法控制此函数创建的标记和折线。
有谁知道如何删除这样的折线,如果不可能的话,还有其他建议吗?
我现在可以使用抑制属性,但由于我在第一阶段使用折线,这并不能真正解决任何问题。
严重沮丧。。
干杯!
最佳答案
这是您的问题的解决方案:使用 suppressPolylines
选项或从 map 中删除渲染器
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var time;
var pointA = new google.maps.LatLng(48.86, 2.35);
var pointB = new google.maps.LatLng(33.7167, 73.0667);
function initialize() {
var rendererOptions = {
map: map,
draggable: true
}
// Instantiate a directions service.
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
// Create a map and center it on islamabad.
var islamabad = new google.maps.LatLng(33.7167, 73.0667);
var mapOptions = {
zoom: 13,
center: islamabad
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = pointA;
var end = pointB;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
};
function removeRoute() {
directionsDisplay.setOptions({
suppressPolylines: true
});
// this "refreshes" the renderer
directionsDisplay.setMap(map);
};
function removeRouteNull() {
directionsDisplay.setMap(null);
};
google.maps.event.addDomListener(window, 'load', initialize);
#map {
height: 280px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<button onclick="removeRoute()">Remove route (suppressPolylines)</button>
<button onclick="removeRouteNull()">Remove route (setMap(null))</button>
<button onclick="initialize()">Undo all</button>
<section id="map"></section>
关于javascript - 从谷歌地图中删除折线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4833011/