我正在使用Google Maps V3导航服务！选择地点类型和KM之后，如果我将鼠标悬停在任何地点图标上，就会在地图和方向上绘制特定的地点图标，并且动画会起作用！我的问题从这里开始，当我将鼠标悬停在任何位置图标上并且可以获取其方向时，如果我更改下拉菜单中的值（即从atm到bank），最后绘制的方向未清除，我尝试使用polyline.setMap（null）但我无法得到
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas {
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=places&geometry"></script>
<script>
var cityCircle;
var marker;
var markerEnd; //vj
var map;
var infowindow = new google.maps.InfoWindow();
var myCenter;
var markers = [];
var markerEndArr = []; // vj
var circles = [];
//google.maps.visualRefresh = true;
var polylineOptionsActual = new google.maps.Polyline({
strokeColor:"#8B6914",
strokeOpacity:0.8,
strokeWeight:2
});
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer({
preserveViewport: true,
polylineOptions: polylineOptionsActual,
suppressMarkers: true,
});
function initialize()
{
var styles = [
{
"stylers": [
{ "visibility": "on" },
{ "saturation": -40 },
{ "hue": "#F0FAFF" },
{ "weight": 1.7 }
]
}
]
myCenter=new google.maps.LatLng(13.0839, 80.2700);
var options = {
mapTypeControlOptions: {
mapTypeIds: ['Styled']
},
center:myCenter,
//maxZoom: 15,
zoom: 15,
mapTypeId: 'Styled'
};
var div = document.getElementById('map-canvas');
map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
directionsDisplay.setMap(map);
}
function setPlaces()
{
var placeType = document.getElementById('cmbMoreFunction').options[document.getElementById('cmbMoreFunction').selectedIndex].value;
var kiloDistance=document.getElementById('kilometers').options[document.getElementById('kilometers').selectedIndex].value ;
var request = {
location:myCenter,
radius: parseInt(kiloDistance),
types: [placeType]
};
var service = new google.maps.places.PlacesService(map);
var circleOptions = {
strokeColor:"#FF0040",
strokeOpacity:0.9,
strokeWeight:1,
fillColor:"#DF013A",
fillOpacity:0.2,
map: map,
center: myCenter,
radius:parseInt(kiloDistance),
};
service.nearbySearch(request, callback);
function callback(results, status)
{
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
for (var i = 0; i < circles.length; i++) {
circles[i].setMap(null);
}
for (var i = 0; i < results.length; i++) {
place = results[i];
if ( calcDistance(results[i].geometry.location.lat () , results[i].geometry.location.lng ()) <= kiloDistance && place.name.toLowerCase() != placeType)
{
createMarker(place,placeType );
}
}
}
}
function createMarker(place , placeType)
{
marker = new google.maps.Marker({
position: place.geometry.location,
});
marker.setMap(map);
google.maps.event.addListener(marker, 'mouseover', function() {
var content = "<div class='infowindow-content'>"+"Place Name:"+ place.name+"<br>"+"<hr>" +"Distance From Center:"+(calcDistance(this.position.lat(),this.position.lng())/1000).toFixed(1)+" "+"KM"+ "</div>" ;
this.setAnimation(google.maps.Animation.BOUNCE);
var start = myCenter;
var end = new google.maps.LatLng(this.position.lat(),this.position.lng());
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);
}
});
infowindow.setContent(content);
infowindow.open(map, this);
});
markers.push(marker);
circles.push(cityCircle);
}
cityCircle = new google.maps.Circle(circleOptions);
function calcDistance(placeLat , placeLon)
{
return google.maps.geometry.spherical.computeDistanceBetween(myCenter, new google.maps.LatLng(placeLat , placeLon))
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="setPlaces()">
<div id="map-canvas" style="width: 90%;float:left"></div>
<div style="width: 10%; float:right">
<select id="cmbMoreFunction" onchange="setPlaces()" >
<option value="atm">Atm</option>
<option value="bank">Banks</option>
<option value="gym">Gym</option>
<option value="hospital">Hospital</option>
<option value="library">Library</option>
<option value="park">Park</option>
<option value="pharmacy">Pharmacy</option>
<option value="restaurant">Restaurant</option>
<option value="school">Schools</option>
<option value="store">Stores</option>
<option value="bus_station">Bus Stop</option>
</select>
<select id="kilometers" onchange="setPlaces()">
<option value="1000">1 KM</option>
<option value="2000">2 KM</option>
<option value="3000">3 KM</option>
</select>
</div>
</body>
</html>`
最佳答案
要隐藏路线显示，请在setPlaces函数开始处调用directionsDisplay.setMap(null)：
function setPlaces()
{
directionsDisplay.setMap(null);
var placeType = document.getElementById('cmbMoreFunction').options[document.getElementById('cmbMoreFunction').selectedIndex].value;
// rest of your code
}
然后，当您在地图上设置新的路线时，将其重新设置为：
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
} // else directions request failed
});