为什么我的谷歌地图上的路线没有显示出来

时间：2016-09-21 07:39:04

标签： javascript php google-maps

我正试图在我的谷歌地图上显示两个方向之间的路线，通过以下文档和示例到目前为止我得到了这个：

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

我认为它应该像这样工作，但它不是没有在地图上显示路线有人知道我在这段代码中做错了什么？ 它提供了关于距离和旅行时间的正确输出，唯一缺少的是显示路线的线。

1 个答案:

答案 0 :(得分：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>
相关问题
最新问题