Question

我正在使用Google Maps V3指导服务！选择地点类型和KM特定地点图标后绘制在地图和方向和动画工作，如果我将鼠标悬停在任何地方图标上！我的问题从这里开始，当我将鼠标悬停在任何地方图标上，我可以得到它的方向，如果我更改下拉列表中的值，即从atm到银行，最后绘制的方向不会被清除我尝试使用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>`

Answer 1

要隐藏路线显示，请在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
});

谷歌地图方向服务标记动画

1 个答案: