Google MAP API V3无法清除以前的多条路线历史记录 [英] Google MAP API V3 cannot clear the previous mutiple routes history
本文介绍了Google MAP API V3无法清除以前的多条路线历史记录的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是替代路线功能，而当我重定向与其他方向。它不能清除以前的路线。
function initialize（）{
//创建一个新的带有一些默认设置的地图
var myLatlng = new google.maps.LatLng（-37.8602828,145.079616）;
var myOptions = {
zoom：8，
center：myLatlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;
//点击函数调用calculateAndDisplayRoute以创建替代路线
var directionsService = new google.maps.DirectionsService;
$ b document.getElementById（'submit'）。addEventListener（'click'，function（）{
calculateAndDisplayRoute（directionsService，map）;
}）;
//此功能用于计算替代路线。
函数calculateAndDisplayRoute（directionsService，map）{
//获取开始和结束输入框的值
var start = document.getElementById（'start'）。value;
var end = document.getElementById（'end'）。value;
//在地图上dran时的属性
var directionsRequest = {
//开始点
原点：开始，
//目标
destination：end，
//多重路线
provideRouteAlternatives：true，
travelMode：google.maps.TravelMode.DRIVING
};
directionsService.route（directionsRequest，function（response，status）{
if（status === google.maps.DirectionsStatus.OK）{
//将多个路由存储在响应中并逐个显示
（var i = 0，len = response.routes.length; i< len; i ++）{
new google.maps.DirectionsRenderer（{
map：map，
directions：response，
routeIndex：i
））;
}
} else {
window.alert（'由于'+状态引起的路线请求失败）;
}
}）;
解决方案
如果您需要更改/删除渲染的方向，您需要保持对 google.maps.DirectionsRenderer 对象的引用，该对象用于显示地图上的方向，并在丢失该引用之前将其从地图中移除。
概念证明小提琴 p>
//在全局范围内
directions = [];
$ b document.getElementById（'submit'）。addEventListener（'click'，function（）{
if（directions&&& direction.length> 0）{
for（var i = 0; i< directions.length; i ++）
directions [i] .setMap（null）;
}
directions = [];
calculateAndDisplayRoute（directionsService ，map）;
}）;
程式码片段：
var directions = []; function initialize（）{//创建一个默认设置的新地图var myLatlng = new google.maps.LatLng（-37.8602828，145.079616）; var myOptions = {zoom：8，center：myLatlng，mapTypeId：google.maps.MapTypeId.ROADMAP} var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; //单击函数调用calculateAndDisplayRoute以创建替代路线var directionsService = new google.maps.DirectionsService;如果（方向&&& direction.length> 0）{for（var i = 0; i< directions.length; i ++）document.getElementById（'submit'）。addEventListener（'click'，function方向[i] .setMap（null）;}方向= []; calculateAndDisplayRoute（directionsService，map）;}）; //这个函数用来计算替代路线。函数calculateAndDisplayRoute（directionsService，map）{//从开始和结束输入框中获取值var start = document.getElementById（'start'）.value; var end = document.getElementById（'end'）.value; //在地图上dran时的属性var directionsRequest = {//起始点origin：开始，//目的地destination：end，//多个路径provideRouteAlternatives：true，travelMode：google.maps.TravelMode.DRIVING}; directionsService.route（directionsRequest，function（response，status）{if（status === google.maps.DirectionsStatus.OK）{//将多个路由保存为响应并逐个显示（var i = 0，len = response.routes.length; i< len; i ++）{directions.push（new google.maps.DirectionsRenderer（{map：map，directions：response，routeIndex：i}））;}} else {window.alert（'由于'+ status'，导致请求失败;}}）; }} google.maps.event.addDomListener（window，load，initialize）;
html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//
This is the alternative route function, while when I redirect with other direction. It can not clear the previous route.
function initialize() {
// Create a new map with some default settings
var myLatlng = new google.maps.LatLng(-37.8602828,145.079616);
var myOptions = {
zoom:8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//click function call calculateAndDisplayRoute to ge the alternative routes
var directionsService = new google.maps.DirectionsService;
document.getElementById('submit').addEventListener('click', function() {
calculateAndDisplayRoute(directionsService, map);
});
//this function used to calculate the alternative route.
function calculateAndDisplayRoute(directionsService, map) {
//get the value from start and end input box
var start = document.getElementById('start').value;
var end =document.getElementById('end').value;
//property when dran on the map
var directionsRequest = {
//starting point
origin: start,
//destination
destination: end,
//multiple route
provideRouteAlternatives: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route( directionsRequest, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
//store the multiple routes in respones and display one by one
for (var i = 0, len = response.routes.length; i < len; i++) {
new google.maps.DirectionsRenderer({
map: map,
directions: response,
routeIndex: i
});
}
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
解决方案
If you need to change/remove the rendered directions, you need to keep references to the google.maps.DirectionsRenderer objects that you use to display directions on the map and remove them from the map before losing that reference.
// in the global scope
directions = [];
document.getElementById('submit').addEventListener('click', function () {
if (directions && directions.length > 0) {
for (var i=0; i<directions.length; i++)
directions[i].setMap(null);
}
directions = [];
calculateAndDisplayRoute(directionsService, map);
});
code snippet:
var directions = [];
function initialize() {
// Create a new map with some default settings
var myLatlng = new google.maps.LatLng(-37.8602828, 145.079616);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//click function call calculateAndDisplayRoute to ge the alternative routes
var directionsService = new google.maps.DirectionsService;
document.getElementById('submit').addEventListener('click', function() {
if (directions && directions.length > 0) {
for (var i = 0; i < directions.length; i++)
directions[i].setMap(null);
}
directions = [];
calculateAndDisplayRoute(directionsService, map);
});
//this function used to calculate the alternative route.
function calculateAndDisplayRoute(directionsService, map) {
//get the value from start and end input box
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
//property when dran on the map
var directionsRequest = {
//starting point
origin: start,
//destination
destination: end,
//multiple route
provideRouteAlternatives: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(directionsRequest, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
//store the multiple routes in respones and display one by one
for (var i = 0, len = response.routes.length; i < len; i++) {
directions.push(new google.maps.DirectionsRenderer({
map: map,
directions: response,
routeIndex: i
}));
}
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="get directions" id="submit" />
<input value="New York, NY" id="start" />
<input value="Newark, NJ" id="end" />
<div id="map_canvas"></div>
这篇关于Google MAP API V3无法清除以前的多条路线历史记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
