2016-09-21 6 views
-1

私はグーグルマップ上に表示2つの方向間のルートを取得しようとしている、ドキュメントと例を以下で表示されない:はなぜグーグルマップ上のルートは、私がこれまでにこれを得た

<?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

私はあなたのコードを修正しました。下記をご確認ください。 JSで

calculateAndDisplayRoute(directionsService,directionsDisplay); 

また、あなたが書かれている間違った緯度と経度:あなたのコードで

あなたは方向を地図上マッピングされている関数を呼び出していませんでした。

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> 
関連する問題