Question

这是我正在写的一个小应用程序，用于检查我国的出租车费用。一切都运作良好，包括自动完成。但如果我输入建筑物/商场名称，则路线未显示。但如果我输入一个道路名称，那么路线就会显示出来。

我所在城市的道路名称示例是：“jalan salemba raya”和“jalan medan merdeka timur”

商场名称示例：“Amaris Hotel Mangga Dua Square”

问题出在哪里？

<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <title>Distance Calculator</title>
        <script type="text/javascript" src="http://maps.google.co.id/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>

        <script type="text/javascript">
        var directionDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var city = new google.maps.LatLng(-6.17503,106.826935);
            var myOptions = {
                zoom:17,
                mapTypeId: google.maps.MapTypeId.HYBRID,
                center: city
            }

            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            directionsDisplay.setMap(map);

            var autocomplete1 = new google.maps.places.Autocomplete(document.getElementById('start'));

            var autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('end'));


        }

        function calcRoute() {
            var start = document.getElementById("start").value;
            var end = document.getElementById("end").value;
            var distanceDisplay = document.getElementById("distance");
            var timeDisplay = document.getElementById("time");
            var tarifDisplay = document.getElementById("tarif");


            var request = {
                origin:start, 
                destination:end,
                avoidTolls:true,
                provideRouteAlternatives:true,
                region:'co.id',
                avoidHighways:true,
                optimizeWaypoints: true,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);

                    jarak = Math.round((response.routes[0].legs[0].distance.value / 1000) * 100) /100;

                    distanceDisplay.value =  jarak + ' km';
                    timeDisplay.value = Math.round((response.routes[0].legs[0].duration.value+1020) /60, 2) + ' menit';
                    tarifDisplay.value = 'Rp '+ Math.floor( (jarak*3240) + 3500) + ',-';
                }
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body onload="initialize()">
        <div>
            <p>
                <label for="start">Start: </label>
                <input type="text" name="start" id="start" placeholder="masukkan alamat"/>

                <label for="end">End: </label>
                <input type="text" name="end" id="end" placeholder="masukkan alamat"/>

                <input type="submit" value="Calculate Route" onclick="calcRoute()" />
            </p>
            <p>
                <label for="distance">Jarak: </label>
                <input type="text" name="distance" id="distance" readonly />
            </p>
            <p>
                <label for="time">Estimasi waktu: </label>
                <input type="text" name="time" id="time" readonly />
            </p>
            <p>
                <label for="tarif">Tarif: </label>
                <input type="text" name="tarif" id="tarif" readonly />
            </p>
        </div>
        <div id="map_canvas" style="height:100%;width:100%"></div>
    </body>
</html>

Answer 1

由于您只需要距离和路线，因此您应该使用自动完成服务提供的坐标。有关如何访问用户选择建议时产生的坐标，请参阅documentation：

var startCoord, endCoord;
google.maps.event.addListener(autocomplete1, 'place_changed', function() {
  var place = autocomplete1.getPlace();
  if (!place.geometry) {
    // Inform the user that a place was not found and return.
    return;
  }
  // place coordinate 
  startCoord = place.geometry.location
});
google.maps.event.addListener(autocomplete2, 'place_changed', function() {
  var place = autocomplete2.getPlace();
  if (!place.geometry) {
    // Inform the user that a place was not found and return.
    return;
  }
  // place coordinate 
  endCoord = place.geometry.location
});

然后在路线请求中使用startCoord和endCoord。

proof of concept fiddle

代码段

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var startCoord, endCoord;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var city = new google.maps.LatLng(-6.17503, 106.826935);
  var myOptions = {
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    center: city
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  directionsDisplay.setMap(map);

  var autocomplete1 = new google.maps.places.Autocomplete(document.getElementById('start'));

  var autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('end'));

  google.maps.event.addListener(autocomplete1, 'place_changed', function() {
    var place = autocomplete1.getPlace();
    if (!place.geometry) {
      // Inform the user that a place was not found and return.
      return;
    }
    // place coordinate 
    startCoord = place.geometry.location
  });
  google.maps.event.addListener(autocomplete2, 'place_changed', function() {
    var place = autocomplete2.getPlace();
    if (!place.geometry) {
      // Inform the user that a place was not found and return.
      return;
    }
    // place coordinate 
    endCoord = place.geometry.location
  });

}

function calcRoute() {
  var start, end;
  if (!startCoord) {
    start = document.getElementById("start").value;
  } else {
    start = startCoord;
  }
  if (!endCoord) {
    end = document.getElementById("end").value;
  } else {
    end = endCoord;
  }
  var distanceDisplay = document.getElementById("distance");
  var timeDisplay = document.getElementById("time");
  var tarifDisplay = document.getElementById("tarif");


  var request = {
    origin: start,
    destination: end,
    avoidTolls: true,
    provideRouteAlternatives: true,
    region: 'co.id',
    avoidHighways: true,
    optimizeWaypoints: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);

      jarak = Math.round((response.routes[0].legs[0].distance.value / 1000) * 100) / 100;

      distanceDisplay.value = jarak + ' km';
      timeDisplay.value = Math.round((response.routes[0].legs[0].duration.value + 1020) / 60, 2) + ' menit';
      tarifDisplay.value = 'Rp ' + Math.floor((jarak * 3240) + 3500) + ',-';
    } else {
      alert("directions request failed, status=" + status);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div>
  <p>
    <label for="start">Start:</label>
    <input type="text" name="start" id="start" placeholder="masukkan alamat" value='Museum Taman Prasasti, South Petojo, Special Capital Region of Jakarta, Indonesia' />

    <label for="end">End:</label>
    <input type="text" name="end" id="end" placeholder="masukkan alamat" value='Mangga Dua Square' />

    <input type="submit" value="Calculate Route" onclick="calcRoute()" />
  </p>
  <p>
    <label for="distance">Jarak:</label>
    <input type="text" name="distance" id="distance" readonly />
  </p>
  <p>
    <label for="time">Estimasi waktu:</label>
    <input type="text" name="time" id="time" readonly />
  </p>
  <p>
    <label for="tarif">Tarif:</label>
    <input type="text" name="tarif" id="tarif" readonly />
  </p>
</div>
<div id="map_canvas"></div>

谷歌地图自动完成，建筑不适用于路由

1 个答案: