PHP'deki JavaScript'deki Google Maps’e yönlendiren rotayı göster

Question

https://maps.googleapis.com/maps/api/directions/json ürününü sorgularm? PHP'den 2 puan arasında yürüyüş yolları veri almak için. Elde edilen verileri, bir JavaScript haritasındaki yönergeleri oluşturacak bazı işlevlere veya yöntemlere iletmek mümkün mü?

Teşekkür

Answer 1

bir JavaScript haritası yön işlemek için basit yolu verilerini istemek için Google Maps JavaScript API v3 DirectionsService kullanmaktır. Bundan gelen yanıt, harita üzerinde doğrudan Google Maps Javascript API v3 DirectionsRenderer ile gerçekleştirilebilir.

Örnek:

var map; 
 

 
function initialize() { 
 
    var myOptions = { 
 
     zoom: 13, 
 
     center: new google.maps.LatLng(40.7127837, -74.0059413), 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    // Create a map and center it on Manhattan. 
 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
    // Instantiate a directions service. 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    // Create a renderer for directions and bind it to the map. 
 
    var directionsDisplay = new google.maps.DirectionsRenderer({ 
 
    map: map 
 
    }); 
 
    var start = document.getElementById("start").value; 
 
    var end = document.getElementById("end").value; 
 
    // Listen to change events from the start and end lists. 
 
    var onChangeHandler = function() { 
 
    var start = document.getElementById("start").value; 
 
    var end = document.getElementById("end").value; 
 
    calcRoute(start, end, directionsService, directionsDisplay); 
 
    }; 
 
    document.getElementById('start').addEventListener('change', onChangeHandler); 
 
    document.getElementById('end').addEventListener('change', onChangeHandler); 
 

 
    calcRoute(start, end, directionsService, directionsDisplay); 
 
} 
 

 
function calcRoute(start, end, directionsService, directionsDisplay) { 
 
    var request = { 
 
    origin: start, 
 
    destination: end, 
 
    travelMode: google.maps.DirectionsTravelMode.WALKING 
 
    }; 
 

 
    // Route the directions and pass the response to a 
 
    // function to create markers for each step. 
 
    directionsService.route(request, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
    } else alert("Directions request failed:" + status); 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#floating-panel { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 25%; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
    text-align: center; 
 
    font-family: 'Roboto', 'sans-serif'; 
 
    line-height: 30px; 
 
    padding-left: 10px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="floating-panel"> 
 
    <b>Start: </b> 
 
    <select id="start"> 
 
    <option value="penn station, new york, ny">Penn Station</option> 
 
    <option value="grand central station, new york, ny">Grand Central Station</option> 
 
    <option value="625 8th Avenue, New York, NY, 10018">Port Authority Bus Terminal</option> 
 
    <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option> 
 
    <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option> 
 
    </select> 
 
    <b>End: </b> 
 
    <select id="end"> 
 
    <option value="260 Broadway New York NY 10007">City Hall</option> 
 
    <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option> 
 
    <option value="moma, New York, NY">MOMA</option> 
 
    <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option> 
 
    <option value="253 West 125th Street, New York, NY">Apollo Theater</option> 
 
    <option value="1 Wall St, New York, NY">Wall St</option> 
 
    </select> 
 
</div> 
 
<div id="map_canvas" style="width:100%;height:100%;"></div>