谷歌距离计算器和自动完成答案

【问题标题】：google distance calculator and auto complete谷歌距离计算器和自动完成
【发布时间】：2012-10-03 02:07:59
【问题描述】：

我正在尝试使用 google maps 和 auto-complete 做一些工作。我采用了谷歌距离脚本并尝试将谷歌的自动完成功能与其集成。距离计算和路线方向工作正常。但是我在 start 和 end 输入字段中的自动完成失败了。如果我在结束和开始字段中手动输入位置，它可以工作，但谷歌无法自动完成。

<style type="text/css">
html {
    height: 100%
}
body {
    height: 100%;
    margin: 0px;
    padding: 0px
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    //<![CDATA[
      var map = null;
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();

      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var mapOptions = {
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: new google.maps.LatLng(41.850033, -87.6500523)
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directions-panel'));

        var control = document.getElementById('control');
        control.style.display = 'block';
        map.controls[google.maps.ControlPosition.TOP].push(control);
      }

      function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            computeTotalDistance(response);
          }
        });
      }
      function computeTotalDistance(result) {
      var total = 0;
      var myroute = result.routes[0];
      for (i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
      }
      total = total / 1000.
      document.getElementById("total").innerHTML = total + " km";
      }

    function auto() {
    var input = document.getElementById[('start'), ('end')];
    var types
    var options = {
       types: [],
       componentRestrictions: {country: ["AUS"]}
        };
        var autocomplete = new google.maps.places.Autocomplete(input, options);
     }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body onLoad="initialize()">
<div id="total"></div>
<div id="control"> <strong>Start:</strong>
<input type="text" id="start"><input type="text" id="end"><input type="button" value="GO" onClick="calcRoute();">
</div>
<table border="1" style="height:100%; width:100%;">
  <tr>
    <td style="width: 70%; height: 100%;"><div id="map_canvas" style="width:100%;height:100%;"></div></td>
    <td  style="width: 30%; height: 100%;"><div id="directions-panel" style="width:100%;height: 100%;"></div></td>
  </tr>
</table>
</body>

【问题讨论】：

标签： javascript google-maps google-maps-api-3 map autocomplete

【解决方案1】：

改变

     <script type="text/javascript"
     src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

到

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

之后

map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

添加

    //Find From location    
    var fromText = document.getElementById('start');
    var fromAuto = new google.maps.places.Autocomplete(fromText);
    fromAuto.bindTo('bounds', map);
    //Find To location
    var toText = document.getElementById('end');
    var toAuto = new google.maps.places.Autocomplete(toText);
    toAuto.bindTo('bounds', map);
    //

【讨论】：

【解决方案2】：

您可以将此代码用于国家/地区限制：

var autocomplete = new google.maps.places.Autocomplete(
    input,
    // Options
    {
        types: ['(cities)'],
        componentRestrictions: {country: 'au'}
    }
);
autocomplete.bindTo('bounds', map);

我知道我回复晚了，但这也会对其他人有所帮助。

【讨论】：

【解决方案3】：

$url = 'https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=Hyderabad+Telangana+India&destinations=Mumbai+Maharashtra+India';
// Get the data from Google Maps API
$json = file_get_contents($url);
// Convert it from JSON to PHP array
$result = json_decode($json, true);
$mi = $result['rows'][0]['elements'][0]['distance']['text'];
echo $km = $mi*1.60934." KM <br/>";
echo $result['rows'][0]['elements'][0]['duration']['text'];

【讨论】：