Google지도, 길 찾기 및 장소 API를 사용하여 동적 길 찾기를 생성합니다.

Question

업데이트 코드 : 이제 거리에서 근거리 검색의 결과를 주문하고 싶습니다. 업데이트 된 코드의

// Google Maps 
var lat = $('#map').data('lat'); 
var lng = $('#map').data('lng'); 

var markerImage = { 
    url: '/img/marker.png' 
} 

var eventTitle = $('.title').data('event-title'); 
var latLng = new google.maps.LatLng(lat, lng); 
var trainDisplay = new google.maps.DirectionsRenderer(); 
var trainService = new google.maps.DirectionsService(); 
var busDisplay = new google.maps.DirectionsRenderer(); 
var busService = new google.maps.DirectionsService(); 
var airportDisplay = new google.maps.DirectionsRenderer(); 
var airportService = new google.maps.DirectionsService(); 

function initialise() { 

    var mapOptions = { 
     zoom: 15, 
     center: latLng 
    }; 

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

    trainDisplay.setPanel(document.getElementById('train')); 
    busDisplay.setPanel(document.getElementById('bus')); 
    airportDisplay.setPanel(document.getElementById('airport')); 

    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     title: eventTitle, 
     icon: markerImage 
    }); 

    var trainRequest = { 
     location: latLng, 
     radius: '500', 
     types: ['train_station'] 
    }; 

    var busRequest = { 
     location: latLng, 
     radius: '500', 
     types: ['bus_station'] 
    }; 

    var airportRequest = { 
     location: latLng, 
     radius: '50000', 
     types: ['airport'] 
    }; 

    var train = new google.maps.places.PlacesService(map); 
    var bus = new google.maps.places.PlacesService(map); 
    var airport = new google.maps.places.PlacesService(map); 

    train.nearbySearch(trainRequest, trainRoute); 
    bus.nearbySearch(busRequest, busRoute); 
    airport.nearbySearch(airportRequest, airportRoute); 
} 

function trainRoute(results, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
     var request = { 
      origin: results[0].geometry.location, 
      destination: latLng, 
      travelMode: google.maps.TravelMode.WALKING 
     }; 
     var name = ' ' + results[0].name; 
     $('#train h3').append(name); 
     trainService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       trainDisplay.setDirections(response); 
      } 
     }); 
    } 
} 

function busRoute(results, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
     var request = { 
      origin: results[0].geometry.location, 
      destination: latLng, 
      travelMode: google.maps.TravelMode.WALKING 
     }; 
     var name = ' ' + results[0].name; 
     $('#bus h3').append(name); 
     busService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       busDisplay.setDirections(response); 
      } 
     }); 
    } 
} 

function airportRoute(results, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
     var request = { 
      origin: results[0].geometry.location, 
      destination: latLng, 
      travelMode: google.maps.TravelMode.DRIVING 
     }; 
     var name = ' ' + results[0].name; 
     $('#airport h3').append(name); 
     airportService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       airportDisplay.setDirections(response); 
      } 
     }); 
    } 
} 

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

END -------------------------------------- -------------------------------------------------- ---------

가장 가까운 유형의 위도/경도를 기반으로 원점을 생성하면서 대상에 대한 특정 위도/경도를 기반으로 동적 방향 결과를 생성하려고합니다 (train_station, bus_station 및 airport).

저는 반경이 '500'인 위치와 관련 위도/경도 값 목록을 얻을 수 있지만 거기에있는 코드이므로 수정해야합니다. 각 유형에 대해 가장 가까운 결과이므로 본질적으로 처음 발견되었습니다.

나는 또한 각 유형에 대한 결과를 생성 할 수있는 방식으로하고 싶습니다. 내 코드는 지금까지 있습니다 :

// Google Maps 
var lat = $('#map').data('lat'); 
var lng = $('#map').data('lng'); 

var markerImage = { 
    url: '/img/marker.png' 
} 

var eventTitle = $('.title').data('event-title'); 
var latLng = new google.maps.LatLng(lat, lng); 
var directionsDisplay = new google.maps.DirectionsRenderer(); 
var directionsService = new google.maps.DirectionsService(); 

function initialise() { 

    var mapOptions = { 
     zoom: 15, 
     center: latLng 
    }; 

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

    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById('directions')); 

    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     title: eventTitle, 
     icon: markerImage 
    }); 

    var request = { 
     location: latLng, 
     radius: '500', 
     types: ['train_station'] 
    }; 

    var service = new google.maps.places.PlacesService(map); 

    service.nearbySearch(request, calcRoute); 
} 

function calcRoute(results, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
     for (var i = 0, result; result = results[i]; i++) { 
      var directionsRequest = { 
       origin: result.geometry.location, 
       destination: latLng, 
       travelMode: google.maps.TravelMode.WALKING 
      }; 
      directionsService.route(directionsRequest, function(response, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        directionsDisplay.setDirections(response); 
       } 
      }); 
     } 
    } 
} 

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

편집 :와 마크에 가까운 방법 : http://paste.laravel.com/1eHK를하지만 각 유형에 가장 가까운/처음부터 결과를 얻을 지금이 필요합니다.

다소 지저분하고 잔인한/마른 것 같지만 포인트로 작동합니다.

Answer 1

당신은 정말 (내가 당신이 알고하지 않습니다) 첫 번째 결과를 원하는 경우 :

function calcRoute(results, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
      var directionsRequest = { 
       origin: results[0].geometry.location, 
       destination: latLng, 
       travelMode: google.maps.TravelMode.WALKING 
      }; 
      directionsService.route(directionsRequest, function(response, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        directionsDisplay.setDirections(response); 
       } 
       else alert ("Directions request failed:"+status); 
      }); 
    } 
} 

working example