Fatal编程技术网
  • javascript/
  • Javascript 为什么我的谷歌地图上的路线没有显示出来

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

javascript php google-maps

Javascript 为什么我的谷歌地图上的路线没有显示出来,javascript,php,google-maps,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";

我正试图通过以下文档和示例，获得我的谷歌地图上显示的两个方向之间的路线：

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


html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}
函数initMap（）{
var mapCanvas=document.getElementById（“map”）；
var directionsService=新的google.maps.directionsService；
var directionsDisplay=新建google.maps.DirectionsRenderer；
变量映射选项={
中心：新的google.maps.LatLng（“，”），
缩放：10
}
var map=new google.maps.map（mapCanvas，mapOptions）；
方向显示.setMap（地图）；
document.getElementById（“”）；
document.getElementById（“”）；
}
函数calculateAndDisplayRoute（方向服务、方向显示）{
方向服务.路线({
来源：document.getElementById（“”）.value，
目标：document.getElementById（“”）.value，
travelMode:“驾驶”
}，功能（响应、状态）{
如果（状态=='OK'）{
方向显示。设置方向（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}
我想它应该是这样工作的，但是它没有在地图上显示路线。有人知道我在代码中做错了什么吗？
它提供了关于距离和旅行时间的正确输出。唯一缺少的是显示路线的行。

我已经更正了您的代码。请在下面查看

在代码中，您没有调用映射到地图上的方向的函数：

calculateAndDisplayRoute(directionsService,directionsDisplay);
而且你在JS中写错了纬度和经度

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

origin:document.getElementById（“”）.value，
目标：document.getElementById（“”）.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>


html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}
函数initMap（）{
var mapCanvas=document.getElementById（“map”）；
var directionsService=新的google.maps.directionsService；
var directionsDisplay=新建google.maps.DirectionsRenderer；
变量映射选项={
中心：新的google.maps.LatLng（“，”），
缩放：10
}
var map=new google.maps.map（mapCanvas，mapOptions）；
方向显示.setMap（地图）；
计算显示路线（方向服务、方向显示）；
}
函数calculateAndDisplayRoute（方向服务、方向显示）{
方向服务.路线({
来源：新google.maps.LatLng（“，”），
目的地：新建google.maps.LatLng（“，”），
travelMode:“驾驶”
}，功能（响应、状态）{
警报（状态）；
如果（状态=='OK'）{
方向显示。设置方向（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}