Google Maps API V3 : A 지점에서 B 지점 (파란색 선)까지의 방향을 어떻게 표시하나요?

Google Maps API V3 : A 지점에서 B 지점 (파란색 선)까지의 방향을 어떻게 표시하나요?

---

데이터베이스에 2 개의 지점에 대한 위도와 경도가 있습니다. Google지도에 지점 A에서 지점 B까지의 경로를 표시하고 싶습니다.

여기 보이는 것처럼 (Google지도 길 찾기)

지도에 방향 선을 그리는 방법?

---

Google Maps API v3의 길 찾기 서비스 를 사용하세요 . 기본적으로 길 찾기 API와 동일하지만지도에서 경로를 쉽게 렌더링 할 수있는 편리한 방법을 제공하는 Google Maps API에 멋지게 포장되어 있습니다.

지도에서 길 찾기 경로를 렌더링하는 방법에 대한 정보와 예 는 Google Maps API v3 문서의 길 찾기 렌더링 섹션 에서 찾을 수 있습니다 .

---

자바 스크립트 사용

Javascript에서 Google Maps API 길 찾기 서비스를 사용하는 방법을 보여주는 작업 데모를 만들었습니다.

• DirectionsService 길 찾기 요청을 보내고받을 개체
• DirectionsRenderer 반환 된 경로를지도에 렌더링하는 객체

function initMap() {
  var pointA = new google.maps.LatLng(51.7519, -1.2578),
    pointB = new google.maps.LatLng(50.8429, -0.1313),
    myOptions = {
      zoom: 7,
      center: pointA
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    // Instantiate a directions service.
    directionsService = new google.maps.DirectionsService,
    directionsDisplay = new google.maps.DirectionsRenderer({
      map: map
    }),
    markerA = new google.maps.Marker({
      position: pointA,
      title: "point A",
      label: "A",
      map: map
    }),
    markerB = new google.maps.Marker({
      position: pointB,
      title: "point B",
      label: "B",
      map: map
    });

  // get route from A to B
  calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);

}



function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
  directionsService.route({
    origin: pointA,
    destination: pointB,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

initMap();

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map-canvas {
      height: 100%;
      width: 100%;
    }

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<div id="map-canvas"></div>

또한 Jsfiddle : http://jsfiddle.net/user2314737/u9no8te4/

Google지도 웹 서비스 사용

다음과 같은 요청을 발행하는 API_KEY를 사용하여 웹 서비스를 사용할 수 있습니다.

https://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&key=API_KEY

API_KEY는 하루에 2,500 개의 무료 요청 할당량으로 Google Developer Console에서 얻을 수 있습니다.

요청은지도에 경로를 그리는 데 사용할 수있는 JSON 또는 XML 결과를 반환 할 수 있습니다.

Google Maps Directions API를 사용하는 웹 서비스에 대한 공식 문서는 여기에 있습니다.

---

귀하의 경우 여기에 길 찾기 서비스를 사용하는 구현이 있습니다 .

function displayRoute() {

    var start = new google.maps.LatLng(28.694004, 77.110291);
    var end = new google.maps.LatLng(28.72082, 77.107241);

    var directionsDisplay = new google.maps.DirectionsRenderer();// also, constructor can get "DirectionsRendererOptions" object
    directionsDisplay.setMap(map); // map should be already initialized.

    var request = {
        origin : start,
        destination : end,
        travelMode : google.maps.TravelMode.DRIVING
    };
    var directionsService = new google.maps.DirectionsService(); 
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

---

  // First Initiate your map. Tie it to some ID in the HTML eg. 'MyMapID'
  var map = new google.maps.Map(
    document.getElementById('MyMapID'),
    {
      center: {
        lat: Some.latitude,
        lng: Some.longitude
      }
    }
  );
  // Create a new directionsService object.
  var directionsService = new google.maps.DirectionsService;
    directionsService.route({
      origin: origin.latitude +','+ origin.longitude,
      destination: destination.latitude +','+ destination.longitude,
      travelMode: 'DRIVING',
    }, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        var directionsDisplay = new google.maps.DirectionsRenderer({
          suppressMarkers: true,
          map: map,
          directions: response,
          draggable: false,
          suppressPolylines: true, 
          // IF YOU SET `suppressPolylines` TO FALSE, THE LINE WILL BE
          // AUTOMATICALLY DRAWN FOR YOU.
        });

        // IF YOU WISH TO APPLY USER ACTIONS TO YOUR LINE YOU NEED TO CREATE A 
        // `polyLine` OBJECT BY LOOPING THROUGH THE RESPONSE ROUTES AND CREATING A 
        // LIST
        pathPoints = response.routes[0].overview_path.map(function (location) {
          return {lat: location.lat(), lng: location.lng()};
        });

        var assumedPath = new google.maps.Polyline({
         path: pathPoints, //APPLY LIST TO PATH
         geodesic: true,
         strokeColor: '#708090',
         strokeOpacity: 0.7,
         strokeWeight: 2.5
       });

       assumedPath.setMap(map); // Set the path object to the map

---

길 찾기 API를 사용합니다 .

Ajax 전화 걸기 IE

https://maps.googleapis.com/maps/api/directions/json?parameters

그런 다음 응답을 구문 분석하십시오.

참고 URL : https://stackoverflow.com/questions/5959788/google-maps-api-v3-how-show-the-direction-from-a-point-a-to-point-b-blue-line