Google 地点和路线 API

Question

我一直在研究快递计算器来计算包裹从一个位置到另一个位置的成本，此功能正在工作，但是我想在 google 地方添加自动完成 API 以自动完成开始和结束位置的输入字段。

我尝试将 places 键添加到谷歌脚本请求中，但它使整个应用程序崩溃

这是谷歌方向API和应用程序JS的小提琴：

https://jsfiddle.net/1k8035gt/

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var northampton = new google.maps.LatLng(52.2405, 0.9027);
var myOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: northampton
}
map = new google.maps.Map(document.getElementById("map_canvas"), 
myOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start              = document.getElementById("start").value;
var end                = document.getElementById("end").value;
var distanceInput      = document.getElementById("distance");
var distanceInputMiles = document.getElementById("distance_miles");
var roundtripInput     = document.getElementById("round_trip_miles");
var finalcostInput     = document.getElementById("finalcost");
var billableInput      = document.getElementById("billable_miles");
var unitsInput         = document.getElementById("units");
var travelCostInput    = document.getElementById("travel_cost");
var parcelweight       = $("#parcel_weight").val();
var additions          = 0;
//DEFINE MY VARS
if ($("#van_type").val() == 'SMALL') {
additions+=5;
console.log(additions);
}
if ($("#van_type").val() == 'SWB') {
additions+=10;
console.log(additions);
}
if ($("#van_type").val() == 'LWB') {
additions+=15;
console.log(additions);
}
if ($("#van_type").val() == 'XLWB') {
additions+=20;
console.log(additions);
}

console.log(parcelweight);

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);
var distance_km          = response.routes[0].legs[0].distance.value / 
1000
var distance_mi          = Math.round( distance_km * 0.6214 );
var roundtrip            = distance_mi * 2;
var finalcost            = additions + roundtrip;
distanceInputMiles.value = distance_mi;
roundtripInput.value     = roundtrip;
finalcostInput.value     = finalcost;
}
});
}
initialize();

Answer 1

首先，您应该声明一个将"自动完成"位置的输入。 声明非常简单：var autocomplete = new google.maps.places.Autocomplete(yourInput);.

接下来，您必须添加一个能够交互的侦听器，该侦听器将进入地图或界面以及自动完成输入。这里的声明也很容易：

autocomplete.addListener('place_changed', function () {
infowindow.close();
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Veuillez sélectionner un choix dans la liste.");
return;
}
// Do what ever you want like:
map.setCenter(place.geometry.location);
}

注意：您可以在此处查阅文档以了解结果的格式。

您还可以查阅有关自动完成功能的 Google 文档。

最后，您的代码应如下所示：

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var northampton = new google.maps.LatLng(52.2405, 0.9027);
var myOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: northampton
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);

var startInput = /** @type {!HTMLInputElement} */(document.getElementById('start'));
var startAutocomplete = new google.maps.places.Autocomplete(startInput);

startAutocomplete.addListener('place_changed', function () {
var place = startAutocomplete.getPlace();
if (!place.geometry) {
window.alert("Veuillez sélectionner un choix dans la liste.");
return;
}
map.setCenter(place.geometry.location);
});

var endInput = /** @type {!HTMLInputElement} */(document.getElementById('end'));
var endAutocomplete = new google.maps.places.Autocomplete(endInput);

endAutocomplete.addListener('place_changed', function () {
var place = endAutocomplete.getPlace();
if (!place.geometry) {
window.alert("Veuillez sélectionner un choix dans la liste.");
return;
}
map.setCenter(place.geometry.location);
});



}
function calcRoute() {
var start              = document.getElementById("start").value;
var end                = document.getElementById("end").value;
var distanceInput      = document.getElementById("distance");
var distanceInputMiles = document.getElementById("distance_miles");
var roundtripInput     = document.getElementById("round_trip_miles");
var finalcostInput     = document.getElementById("finalcost");
var billableInput      = document.getElementById("billable_miles");
var unitsInput         = document.getElementById("units");
var travelCostInput    = document.getElementById("travel_cost");
var parcelweight       = $("#parcel_weight").val();
var additions          = 0;

//DEFINE MY VARS
if ($("#van_type").val() == 'SMALL') {
additions+=5;
console.log(additions);
}
if ($("#van_type").val() == 'SWB') {
additions+=10;
console.log(additions);
}
if ($("#van_type").val() == 'LWB') {
additions+=15;
console.log(additions);
}
if ($("#van_type").val() == 'XLWB') {
additions+=20;
console.log(additions);
}


console.log(parcelweight);


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);
var distance_km          = response.routes[0].legs[0].distance.value / 1000
var distance_mi          = Math.round( distance_km * 0.6214 );
var roundtrip            = distance_mi * 2;
var finalcost            = additions + roundtrip;
distanceInputMiles.value = distance_mi;
roundtripInput.value     = roundtrip;
finalcostInput.value     = finalcost;
}
});
}
initialize();

#map_canvas {
height: 300px;
}
input {
margin-bottom: 1em;
}

<div>
<p>
<label for="start">Start: </label>
<input type="text" name="start"  id="start" />
<br/>
<label for="end">End: </label>
<input type="text" name="end" id="end" />
<br/>
<label for="van_type">Parcel Weight: </label>
<select id="van_type">
<option value="SMALL">Small Van ( Upto 400KG )</option>
<option value="SWB"Transit SWB Van ( Upto 850KG )</option>
<option value="LWB">LWB Van ( Upto 1300KG )</option>
<option value="XLWB">XLWB Van ( Upto 1150KG )</option>
</select>
<br/><br/>
<input type="submit" value="Calculate Route" onclick="calcRoute()" />
</p>
<p>

<label for="distance">Distance (mi): </label>
<input type="text" id="distance_miles" readonly="true" />

<label for="distance">Round Trip (mi): </label>
<input type="text" id="round_trip_miles" readonly="true" />

<label for="finalcost">Final cost £: </label>
<input type="text" id="finalcost" readonly="true" />
</p>
</div>
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAAdFqcFgkBXdekUDy_R_czpgHLRPoVwmQ&libraries=places"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

注意：我更改了自动完成库的回调。我不需要函数来初始化您的自动完成。我把它的初始化放到函数初始化中。