2016-09-21 3 views
-1

Я пытаюсь получить маршрут между 2-х направлениях, отображаемых на моей карте Google, следуя документации и примеров я получил это до сих пор:Почему маршрут на моей карте Google не отображается

<?php 
function get_coordinates($city, $street) 
{ 
    $address = urlencode($city.','.$street); 
    $url = "http://maps.google.com/maps/api/geocode/json?address=$address&sensor=false&region=Netherlands"; 
    $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_URL, $url); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
    curl_setopt($ch, CURLOPT_PROXYPORT, 3128); 
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0); 
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0); 
    $response = curl_exec($ch); 
    curl_close($ch); 
    $response_a = json_decode($response); 
    $status = $response_a->status; 

    if ($status == 'ZERO_RESULTS') 
    { 
     return FALSE; 
    } 
    else 
    { 
     $return = array('lat' => $response_a->results[0]->geometry->location->lat, 'long' => $long = $response_a->results[0]->geometry->location->lng); 
     return $return; 
    } 
} 
function GetDrivingDistance($lat1, $lat2, $long1, $long2) //rekent afstand en tijd uit 
{ 
    $url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins=".$lat1.",".$long1."&destinations=".$lat2.",".$long2."&mode=driving&language=nl-NL"; 
    $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_URL, $url); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
    curl_setopt($ch, CURLOPT_PROXYPORT, 3128); 
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0); 
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0); 
    $response = curl_exec($ch); 
    curl_close($ch); 
    $response_a = json_decode($response, true); 
    $dist = $response_a['rows'][0]['elements'][0]['distance']['text']; 
    $time = $response_a['rows'][0]['elements'][0]['duration']['text']; 

    return array('distance' => $dist, 'time' => $time); 
} 
$coordinates1 = get_coordinates('Hardenberg','Parkweg'); 
$coordinates2 = get_coordinates('Zwolle','Stationstraat'); 
if (!$coordinates1 || !$coordinates2) 
{ 
    echo 'Bad address.'; 
} 
else 
{ 
    $dist = GetDrivingDistance($coordinates1['lat'], $coordinates2['lat'], $coordinates1['long'], $coordinates2['long']); 
    echo 'Afstand: <b>'.$dist['distance'].'</b><br>Reis tijd met auto: <b>'.$dist['time'].'</b>'; 
} 

?> 


<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 
     function initMap() { 
     var mapCanvas = document.getElementById("map"); 
     var directionsService = new google.maps.DirectionsService; 
     var directionsDisplay = new google.maps.DirectionsRenderer; 
     var mapOptions = { 
      center: new google.maps.LatLng("<?php echo $coordinates1['lat']; ?>", "<?php echo $coordinates1['long']; ?>"), 
      zoom: 10 
     } 
     var map = new google.maps.Map(mapCanvas, mapOptions); 
     directionsDisplay.setMap(map); 
     document.getElementById('<?php echo $coordinates1; ?>'); 
     document.getElementById('<?php echo $coordinates2; ?>'); 
     } 

     function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
     directionsService.route({ 
      origin: document.getElementById('<?php echo $coordinates1; ?>').value, 
      destination: document.getElementById('<?php echo $coordinates2; ?>').value, 
      travelMode: 'DRIVING' 
     }, function(response, status) { 
      if (status === 'OK') { 
      directionsDisplay.setDirections(response); 
      } else { 
      window.alert('Directions request failed due to ' + status); 
      } 
     }); 
     } 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCE86-tBBJ647owGUS5OhGeJ9CHDficids&callback=initMap"> 
    </script> 
    </body> 
</html> 

I подумал, что он должен работать так, но не показывать маршрут на карте, кто-то знает, что я сделал не так в этом коде? Он дает правильный результат о расстоянии и времени в пути, единственное, чего не хватает, это линия, показывающая маршрут.

ответ

1

Я скорректировал ваш код. Пожалуйста, проверьте ниже.

В своем коде вы не вызываете функцию, которая направление отображается на карте:

calculateAndDisplayRoute(directionsService,directionsDisplay); 

Также вы написали неправильно широту и долготу в JS.

origin: document.getElementById('<?php echo $coordinates1; ?>').value, 
destination: document.getElementById('<?php echo $coordinates2; ?>').value 

Попробуйте это:

<?php 
function get_coordinates($city, $street) 
{ 
    $address = urlencode($city.','.$street); 
    $url = "http://maps.google.com/maps/api/geocode/json?address=$address&sensor=false&region=Netherlands"; 
    $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_URL, $url); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
    curl_setopt($ch, CURLOPT_PROXYPORT, 3128); 
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0); 
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0); 
    $response = curl_exec($ch); 
    curl_close($ch); 
    $response_a = json_decode($response); 
    $status = $response_a->status; 

    if ($status == 'ZERO_RESULTS') 
    { 
     return FALSE; 
    } 
    else 
    { 
     $return = array('lat' => $response_a->results[0]->geometry->location->lat, 'long' => $long = $response_a->results[0]->geometry->location->lng); 
     return $return; 
    } 
} 
function GetDrivingDistance($lat1, $lat2, $long1, $long2) //rekent afstand en tijd uit 
{ 
    $url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins=".$lat1.",".$long1."&destinations=".$lat2.",".$long2."&mode=driving&language=nl-NL"; 
    $ch = curl_init(); 
    curl_setopt($ch, CURLOPT_URL, $url); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
    curl_setopt($ch, CURLOPT_PROXYPORT, 3128); 
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0); 
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0); 
    $response = curl_exec($ch); 
    curl_close($ch); 
    $response_a = json_decode($response, true); 
    $dist = $response_a['rows'][0]['elements'][0]['distance']['text']; 
    $time = $response_a['rows'][0]['elements'][0]['duration']['text']; 

    return array('distance' => $dist, 'time' => $time); 
} 
$coordinates1 = get_coordinates('Hardenberg','Parkweg'); 
$coordinates2 = get_coordinates('Zwolle','Stationstraat'); 
if (!$coordinates1 || !$coordinates2) 
{ 
    echo 'Bad address.'; 
} 
else 
{ 
    $dist = GetDrivingDistance($coordinates1['lat'], $coordinates2['lat'], $coordinates1['long'], $coordinates2['long']); 
    echo 'Afstand: <b>'.$dist['distance'].'</b><br>Reis tijd met auto: <b>'.$dist['time'].'</b>'; 
} 

?> 


<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 
     function initMap() { 
     var mapCanvas = document.getElementById("map"); 
     var directionsService = new google.maps.DirectionsService; 
     var directionsDisplay = new google.maps.DirectionsRenderer; 
     var mapOptions = { 
      center: new google.maps.LatLng("<?php echo $coordinates1['lat']; ?>", "<?php echo $coordinates1['long']; ?>"), 
      zoom: 10 
     } 
     var map = new google.maps.Map(mapCanvas, mapOptions); 
     directionsDisplay.setMap(map); 
     calculateAndDisplayRoute(directionsService,directionsDisplay); 
     } 

     function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
     directionsService.route({ 
      origin: new google.maps.LatLng("<?php echo $coordinates1['lat']; ?>", "<?php echo $coordinates1['long']; ?>"), 
      destination: new google.maps.LatLng("<?php echo $coordinates2['lat']; ?>", "<?php echo $coordinates2['long']; ?>"), 
      travelMode: 'DRIVING' 
     }, function(response, status) { 
      alert(status); 
      if (status === 'OK') { 
      directionsDisplay.setDirections(response); 
      } else { 
      window.alert('Directions request failed due to ' + status); 
      } 
     }); 
     } 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCE86-tBBJ647owGUS5OhGeJ9CHDficids&callback=initMap"> 
    </script> 
    </body> 
</html>