2014-11-15 2 views
0

내 위치에서 특정 위치로 경로를 플로팅하는 데 문제가 있습니다. 원점 변수의 위도와 경도를 가져와 누군가가 칠레에서 에 관해서는 사전에경로를 내 위치에서 위치 Google지도 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>

감사합니다 ... 다른 변수의 값을 떠나 다른 사이 마커, 그들을 떠나하는 시도를 해결하기 위해 관리!

답변

0

여기에 몇 가지 오류가 있습니다. 먼저, 오류 관리는 사용자 최종 위치와 관련이없는 임의의 위치 (lat : 60, lng : 105)에 정보창을 표시합니다.

둘째, 사용자의 현재 위치를 무시하고 경로 요청에 출발지와 목적지 (산티아고 및 랑카과)가 고정되어 있습니다. 대신 HTML5 Geolocation 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); 
있어