Google地图删除以前的路线并绘制一条新路线 [英] Google map Remove previous route and draw a new route
本文介绍了Google地图删除以前的路线并绘制一条新路线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
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：[]}）;
//设置目的地，原点和行驶模式。
var request = {
destination：pointB，
origin：pointA，
travelMode：google.maps.TravelMode.DRIVING
};
//directionsDisplay.setMap（null）;
//将路线请求传递给路线服务。
directionsService.route（request，function（response，status）{
if（status == google.maps.DirectionsStatus.OK）{
//在地图上显示路线。
//directionsDisplay.set('directions'，null）;
//directionsDisplay.setMap（map）;
//directionsDisplay.setDirections（{routes：[]}）;
directionsDisplay.setDirections（response）;
} else {
window.alert（'由于'+状态导致请求失败）;
}
}）;
}
这些代码已经可以绘制两个点的路线。但问题是当我点击一个标记调用showInfoWindow（）时，它将绘制一条路线，并且当它再次调用showInfoWindow（）时再次点击另一条标记，它将绘制另一条路线，保留前一条路线。我想清除前一条一条路线。尝试所有在线方法并找不到原因。
解决方案
如果您只希望在地图上显示一个方向结果时间，只能创建并使用 DirectionsRenderer code> ，目前您为 DirectionsService 的每个结果创建一个新的结果。
code snippet：
var geocoder; var map; var places; var infoWindow = new google.maps.InfoWindow（）; // Jersey City，NJ，USAvar currentLat = 40.7281575; var currentLon = -74.0776417; //全局引用DirectionsRenderervar方向Displ ay; 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）; //初始化全局DirectionsRenderer directionsDisplay = new google.maps.DirectionsRenderer（{map：map}）; var marker1 = new google.maps.Marker（{/ *纽约，纽约，美国* / 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）;函数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）;} 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：[]}）; //设置目的地，原点和旅行模式。 var request = {destination：pointB，origin：pointA，travelMode：google.maps.TravelMode.DRIVING}; //directionsDisplay.setMap(null）; //将路线请求传递给路线服务。 directionsService.route（request，function（response，status）{if（status == google.maps.DirectionsStatus.OK）{//显示地图上的路线//directionsDisplay.set('directions'，null）; / /directionsDisplay.setMap(map）; //directionsDisplay.setDirections（{routes：[]}）; directionsDisplay.setDirections（response）;} else {window.alert（'Directions requests failed to'+'status）;}}） ;}
html，body，＃map_canvas {height：500px ;宽度：500px; margin：0px; < script src =https：//
Currently I have encounter a problem. I used and changed sample API to draw route for two points. Point A is current location. Point B is one of the multiple markers' location. Those markers are created which I call nearby search function.
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);
}
});
}
These codes could draw route for two points already. But the problem is when I click one marker call the showInfoWindow() it will draw one route, and click another one when it will call the showInfoWindow() again it will draw another route remaining the previous one route.I want to clear the previous one route. Tried all the methods online and could not find the reason.
解决方案
If you only want one directions result displayed on the map at the time, only create and use one instance of the DirectionsRenderer, currently you create a new one for every result from the DirectionsService.
code snippet:
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>
这篇关于Google地图删除以前的路线并绘制一条新路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
