我正在尝试使用谷歌地图和自动完成工作。我已经采取谷歌距离脚本,并尝试将谷歌的自动完成功能与它集成。距离计算和路线方向工作正常。但我在 开始 和 结束 输入字段中自动完成功能失败了。如果我在末尾和开始字段中手动键入位置,它可以正常工作,但谷歌没有自动完成。
<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>
答案 0 :(得分:3)
更改
<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);
//
答案 1 :(得分:1)
您可以将此代码用于国家/地区限制:
var autocomplete = new google.maps.places.Autocomplete(
input,
// Options
{
types: ['(cities)'],
componentRestrictions: {country: 'au'}
}
);
autocomplete.bindTo('bounds', map);
我知道我回复很晚,但也会帮助其他人。
答案 2 :(得分:-1)
$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'];