在行車路線上顯示鼠標的提醒

-1

當我將鼠標懸停在駕車路線上時，警報沒有顯示，任何人都可以幫助我嗎？
我試過每一件事，但沒有在駕駛路線鼠標的作品。在行車路線上顯示鼠標的提醒

注意：我這樣做的駕駛路線鼠標不在多段線上。

<!DOCTYPE html> 
    <html> 
     <head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<title>Travel modes in directions</title> 
    <link  href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 
var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 
var haight = new google.maps.LatLng(37.7699298, -122.4469157); 
var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205); 

    function initialize() { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
    var mapOptions = { 
zoom: 14, 
mapTypeId: google.maps.MapTypeId.ROADMAP, 
center: haight 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     directionsDisplay.setMap(map); 
    } 
     var points=[]; 
     function calcRoute() { 
     var selectedMode = document.getElementById('mode').value; 
    var request = { 
    origin: haight, 
    destination: oceanBeach, 
    // Note that Javascript allows us to access the constant 
    // using square brackets and a string value as its 
    // "property." 
    travelMode: google.maps.TravelMode[selectedMode] 
    }; 
     directionsService.route(request, function(response, status) { 
     var myRoute = response.routes[0].legs[0];  
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     for (var i = 0; i < myRoute.steps.length; i++) { 
      for (var j = 0; j < myRoute.steps[i].lat_lngs.length; j++) { 
       points.push(myRoute.steps[i].lat_lngs[j]); 
      } 
     } 
    } 
     }); 
     alert("points "+points); 
     var eventLine = new google.maps.Polyline({ 
    path: points, 
    visible: true, 
    strokeOpacity: 0, 
    zIndex: 1000 
      }); 
     eventLine.setMap(map); 
     google.maps.event.addListener(eventLine, "mouseover", function() { 
               alert("hi") 
             }); 
     } 

    google.maps.event.addDomListener(window, 'load', initialize); 

     </script> 
    </head> 
    <body> 
<div id="panel"> 
<b>Mode of Travel: </b> 
<select id="mode" onchange="calcRoute();"> 
    <option value="DRIVING">Driving</option> 
    <option value="WALKING">Walking</option> 
    <option value="BICYCLING">Bicycling</option> 
    <option value="TRANSIT">Transit</option> 
</select> 
</div> 
<div id="map-canvas"></div> 
    </body> 
    </html>

來源

2013-07-19 ankur_agarwal

你爲什麼說你是不是添加警惕折線？這就是你發佈的代碼所做的。 – geocodezip

的DirectionsService沒有鼠標懸停事件，Polyline一樣。您的代碼工作對我來說，如果我移動折線創建到爲DirectionsService回調：

http://www.geocodezip.com/v3_SO_directionsMouseOver.html

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<title>Travel modes in directions</title> 
    <link  href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 
var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 
var haight = new google.maps.LatLng(37.7699298, -122.4469157); 
var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205); 

    function initialize() { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
    var mapOptions = { 
zoom: 14, 
mapTypeId: google.maps.MapTypeId.ROADMAP, 
center: haight 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     directionsDisplay.setMap(map); 
    calcRoute(); 
    } 
     var points=[]; 
     function calcRoute() { 
     var selectedMode = document.getElementById('mode').value; 
    var request = { 
    origin: haight, 
    destination: oceanBeach, 
    // Note that Javascript allows us to access the constant 
    // using square brackets and a string value as its 
    // "property." 
    travelMode: google.maps.TravelMode[selectedMode] 
    }; 
     directionsService.route(request, function(response, status) { 
     var myRoute = response.routes[0].legs[0];  
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     for (var i = 0; i < myRoute.steps.length; i++) { 
      for (var j = 0; j < myRoute.steps[i].lat_lngs.length; j++) { 
       points.push(myRoute.steps[i].lat_lngs[j]); 
      } 
     } 
//   alert("points "+points); 
     var eventLine = new google.maps.Polyline({ 
    path: points, 
    visible: true, 
    strokeOpacity: 0, 
    zIndex: 1000 
      }); 
     eventLine.setMap(map); 
     google.maps.event.addListener(eventLine, "mouseover", function() { 
               alert("hi") 
             }); 
    } else { alert("Directions request failed: "+status); } 
     }); 
     } 

    google.maps.event.addDomListener(window, 'load', initialize); 

     </script> 
    </head> 
    <body> 
<div id="panel"> 
<b>Mode of Travel: </b> 
<select id="mode" onchange="calcRoute();"> 
    <option value="DRIVING">Driving</option> 
    <option value="WALKING">Walking</option> 
    <option value="BICYCLING">Bicycling</option> 
    <option value="TRANSIT">Transit</option> 
</select> 
</div> 
<div id="map-canvas"></div> 
    </body> 
</html>

來源

2013-07-19 13:41:42 geocodezip

但我想要它的駕駛路線，而不是折線 –

DirectionsRenderer沒有任何記錄的鼠標懸停事件。唯一記錄的方法是使用DirectionsResult創建的多段線。您可以[請求增強]（https://code.google.com/p/gmaps-api-issues/）。 – geocodezip

okz謝謝。我要求它 –

在行車路線上顯示鼠標的提醒

回答

相關問題