Satnav가 웹 사이트에 삽입하는 방향을 좋아합니다.

Question

Sat-Nav 위치 정보 유형 매핑을 웹 사이트에 삽입하는 방법이 있습니까? 기본적으로 실시간 길 찾기를 설정하여 방향을 전환하십시오.

Like this

내가 Google지도 앱이이 기능을 가지고 있음을 알고 있지만, 나는이 웹 사이트에 구현이 필요한 모든 지침은 좋은 것입니다.

감사합니다.

Answer 1

Google지도는 앱뿐만 아니라이 기능을 가지고 있습니다.
사용할 수 있습니다. JavaScript API
해당 API에서 예제 및 설명서를 찾을 수 있습니다. 그것을 전달이 유형 DirectionsService의 를 객체를 생성, Google지도 자바 스크립트 API에서 자신의 directions service

사용하려면 방향을 사용하고 DirectionsService.route() 에가 길 찾기 서비스에 대한 요청을 시작 호출해야합니다 방향에 대한
, DirectionsRequest 입력 조건을 포함하는 개체 리터럴과 응답 수신시 실행할 콜백 메서드.

DirectionsRequest 오브젝트 리터럴은 다음 필드를 포함

{ 
    origin: LatLng | String | google.maps.Place, 
    destination: LatLng | String | google.maps.Place, 
    travelMode: TravelMode, 
    transitOptions: TransitOptions, 
    drivingOptions: DrivingOptions, 
    unitSystem: UnitSystem, 
    waypoints[]: DirectionsWaypoint, 
    optimizeWaypoints: Boolean, 
    provideRouteAlternatives: Boolean, 
    avoidHighways: Boolean, 
    avoidTolls: Boolean, 
    region: String 
} 

를 길 찾기 서비스 요청 완료시 실행되는 콜백을 전달해야 route() 방법으로 DirectionsService에 요청 초기화. 이 콜백은 응답에 DirectionsResult 및 DirectionsStatus 코드를 반환합니다.

다음의 예는 방향이 요청하고 HTML 본문에서 directionsPanel 사업부

var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 

function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
    var mapOptions = { 
    zoom:7, 
    center: chicago 
    } 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById("directionsPanel")); 
} 

function calcRoute() { 
    var start = document.getElementById("start").value; 
    var end = document.getElementById("end").value; 
    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); 
    } 
    }); 
} 

에서 응답이 표시됩니다 : HTTPS :

<div id="map" style="float:left;width:70%; height:100%"></div> 
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>