從我的位置到一個位置的跟蹤路線谷歌地圖v3

我有一個從我的位置到某個位置的繪製路線的問題，我需要將我的經度和緯度作爲原點變量，並簡單附加代碼以查看是否有人設法解決試圖離開的值的其他變量，讓他們在一個標記，除其他外...從我的位置到一個位置的跟蹤路線谷歌地圖v3

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Geolocation</title> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <style> 
 
     html, body, #map-canvas { 
 
     height: 100%; 
 
     margin: 0px; 
 
     padding: 0px 
 
     } 
 
    </style> 
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 

 
    <script> 
 
// Note: This example requires that you consent to location sharing when 
 
// prompted by your browser. If you see a blank space instead of the map, this 
 
// is probably because you have denied permission for location sharing. 
 

 
var map; 
 

 
function initialize() { 
 
    var pos; 
 
    var latitud; 
 
    var longitud; 
 
    var dirinicial; 
 
         
 
    var directionsService = new google.maps.DirectionsService(); 
 
    var directionsDisplay = new google.maps.DirectionsRenderer(); 
 
    var mapOptions = { 
 
    zoom: 6, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
 
     mapOptions); 
 
    
 
    // Try HTML5 geolocation 
 
    if(navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(position) { 
 
     pos = new google.maps.LatLng(position.coords.latitude, 
 
             position.coords.longitude); 
 
     //var hola = pos; 
 
     latitud = position.coords.latitude; 
 
     longitud = position.coords.longitude; 
 
    
 
    /* var marker = new google.maps.Marker({ 
 
     position: pos, 
 
     map: map, 
 
     title: 'Hello World!' 
 
    }); 
 
    
 
    */ 
 
     var infowindow = new google.maps.InfoWindow({ 
 
     map: map, 
 
     position: pos, 
 
     // content: 'Location found using HTML5.' 
 
     });    
 
     map.setCenter(pos); 
 
     
 
    }, function() { 
 
     handleNoGeolocation(true); 
 
    }); 
 

 
    } else { 
 
    // Browser doesn't support Geolocation 
 
    handleNoGeolocation(false); 
 
    } 
 
    var request = { 
 
     origin:'Santiago', 
 
     destination: 'Rancagua', 
 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
    }; 
 
directionsDisplay.setMap(map); 
 
    directionsService.route(request, function(response, status) { 
 
     if (status == google.maps.DirectionsStatus.OK) { 
 

 
    /*  // Display the distance: 
 
     document.getElementById('distance').innerHTML += 
 
      response.routes[0].legs[0].distance.value + " meters"; 
 

 
     // Display the duration: 
 
     document.getElementById('duration').innerHTML += 
 
      response.routes[0].legs[0].duration.value + " seconds"; 
 
*/ 
 
     directionsDisplay.setDirections(response); 
 
     } 
 
    }); 
 
} 
 

 
     function GetAddress(latlang) { 
 
     
 
    var latlng = new google.maps.LatLng(latitud, longitud); 
 
    var geocoder = geocoder = new google.maps.Geocoder(); 
 
      geocoder.geocode({ 'latLng': latlng }, function (results, status) { 
 
       if (status == google.maps.GeocoderStatus.OK) { 
 
        if (results[1]) { 
 
         dirinicial= results[1].formatted_address; 
 
         //alert("Location: " + results[1].formatted_address); 
 
        } 
 
       } 
 
      }); 
 
      
 
     } 
 
     
 
     
 
function handleNoGeolocation(errorFlag) { 
 
    if (errorFlag) { 
 
    var content = 'Error: The Geolocation service failed.'; 
 
    } else { 
 
    var content = 'Error: Your browser doesn\'t support geolocation.'; 
 
    } 
 

 
    var options = { 
 
    map: map, 
 
    position: new google.maps.LatLng(60, 105), 
 
    content: content 
 
    }; 
 

 
    var infowindow = new google.maps.InfoWindow(options); 
 
    map.setCenter(options.position); 
 
} 
 

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

 
    </script> 
 
    </head> 
 
    <body> 
 
    <div id="map-canvas"></div> 
 
    </body> 
 
</html>

預先感謝來自智利的問候！

來源

2014-11-15 Cesar Donoso

我在這裏看到幾個錯誤。首先，您的錯誤管理會在與用戶最終位置無關的隨機位置{lat：60，lng：105}中顯示infowindow。

其次，您的路線請求具有固定的出發地和目的地（聖地亞哥和蘭卡瓜），根本不考慮用戶的當前位置。您應該等待HTML5地理定位API返回一些用作原點的東西。

我已經簡化你的代碼了一下，得到這個工作

var map; 

function initialize() { 
    var pos; 
    var latitud; 
    var longitud; 
    var dirinicial; 

    var directionsService = new google.maps.DirectionsService(); 
    var directionsDisplay = new google.maps.DirectionsRenderer(); 
    var mapOptions = { 
     zoom: 6, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var generateRoute=function(origin,destination) { 
     var request = { 
      origin:origin, 
      destination: destination, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }; 

     directionsDisplay.setMap(map); 
     directionsService.route(request, function(response, status) { 
      if (status === google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
      } 
     }); 
    }; 

    // Try HTML5 geolocation 
    if(navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

     var infowindow = new google.maps.InfoWindow({ 
      map: map, 
      position: pos, 
      content: 'Location found using HTML5.' 
     }); 

     var yourpositionmarker = new google.maps.Marker({position:pos, map:map}); 

     infowindow.open(map,yourpositionmarker); 
     map.setCenter(pos); 
     generateRoute(pos, 'Rancagua'); 
    }); 

    } else { 
    // Browser doesn't support Geolocation 
    console.log('No geolocation API'); 
    } 

} 

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

來源

2014-11-17 15:13:22 amenadiel

從我的位置到一個位置的跟蹤路線谷歌地圖v3

回答

相關問題