堆棧內存溢出
  簡體   English   中英

為什么我的谷歌地圖上的路線沒有顯示

[英]Why is the route on my google map not showing up

 原文  2016-09-21 07:39:03  7   1    javascript/ php/ google-maps

問題描述

我正在嘗試通過以下文檔和示例獲取我的谷歌地圖上顯示的 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>

我認為它應該像這樣工作，但它沒有在地圖上顯示路線有人知道我在這段代碼中做錯了什么嗎？ 它給出了關於距離和旅行時間的正確輸出，唯一缺少的是顯示路線的線。

1 個解決方案

解決方案1
 1 已采納  2016-09-21 07:51:05

我已經更正了你的代碼。 請檢查以下。

在您的代碼中，您沒有調用在地圖上映射方向的函數：

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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 谷歌地圖沒有顯示我的位置 Google地圖未顯示 為什么我的谷歌地圖標記沒有顯示？ 從 JSON 構建的 Object 陣列未顯示在我的 Google map 上 為什么我的 RaphaelJs 地圖上只顯示歐洲？ Google Map標記未顯示 標記未顯示在Google Map中 樣式的Google地圖未顯示 歸因未顯示在Google地圖上 Adsense Google MAP API未顯示MAP
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM