google map api를 사용하여 현재 위치에서 좌표까지 길 찾기

Google api 코드를 사용하여 내가 만드는 테스트 앱을 사용하는 방법을 배우려고합니다. 최종 결과는 사용자의 현재 위치를 사용하여 JSON 파일에있는 좌표로 방향을로드하는 버튼을 갖고 싶습니다.google map api를 사용하여 현재 위치에서 좌표까지 길 찾기

아래의 Google 예제를 사용하고 있지만 현재 위치를 볼 수 없습니다. 그것에서 일하고 있거나 수송 지시를 위로 얻는가?

건배

구글지도

<!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="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <style> 
     #directions-panel { 
     height: 100%; 
     float: right; 
     width: 390px; 
     overflow: auto; 
     } 

     #map-canvas { 
     margin-right: 400px; 
     } 

     #control { 
     background: #fff; 
     padding: 5px; 
     font-size: 14px; 
     font-family: Arial; 
     border: 1px solid #ccc; 
     box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4); 
     display: none; 
     } 

     @media print { 
     #map-canvas { 
      height: 500px; 
      margin: 0; 
     } 

     #directions-panel { 
      float: none; 
      width: auto; 
     } 
     } 
    </style> 
<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); 
    directionsDisplay.setPanel(document.getElementById('directions-panel')); 
} 

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) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
    } 
    }); 
} 

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>

JSON 파일 : 당신이 directionsService의 응답에 제공된 단계를 반복 할 필요가있는 경로 지침

{ 
    "Town":"Livingston", 
    "Long":-3.52207, 
    "Lat":55.8864, 
    }, 
    { 
    "Town":"Brighton and Hove Albion", 
    "Long":-0.08014, 
    "Lat":50.8609, 
    }, 
    { 
    "Town":"Liverpool", 
    "Long":-2.96096, 
    "Lat":53.4308,

출처

2013-09-30 Grimlockz

현재 위치를 검색하는 코드에는 아무 것도 없습니다. 어떻게 작동 할 것이라고 기대 했습니까? –

. 뭔가 같이 :

var steps = response.routes[0].legs[0].steps; 
var html = ''; 
for (var i in steps) { 
    html += steps[i].instructions + '<br/>'; 
} 
document.getElementById('directions').innerHTML = html;

현재 위치 얻으려면 브라우저는 geolocation을 지원하기 위해 natively, 또는 polyfill의 사용을 통해 하나가 필요합니다. 그리고 이것을 다음과 같이 사용할 것입니다 :

var geo = window.navigator.geolocation; 
if (geo) { 
    geo.getCurrentPosition(showPos, showErr); 
} 

function showPos(pos) { 
    var lat = pos.coords.latitude; 
    var lng = pos.coords.longitude; 
    console.log(lat, lng); 
} 

function showErr(err) { 
    console.log(err); 
}

출처

2013-09-30 15:59:49 Andy

google map api를 사용하여 현재 위치에서 좌표까지 길 찾기

답변

관련 문제