Google maps 方向服务谷歌地图API_Google Maps

Google maps 方向服务谷歌地图API

google-maps

Google maps 方向服务谷歌地图API,google-maps,Google Maps,我需要方向服务谷歌地图两个地方之间的方向代码运行良好，但我希望加载页面后，它直接向我显示方向，而无需在选择区域进行选择我试图在select中添加一个选项，但没有成功 <select id="start"> <option value="chicago, il">Chicago</option> </select> <select id="end"> <option value="flagstaff, az">Flagst

我需要方向服务谷歌地图两个地方之间的方向

代码运行良好，但我希望加载页面后，它直接向我显示方向，而无需在选择区域进行选择

我试图在select中添加一个选项，但没有成功

<select id="start">
<option value="chicago, il">Chicago</option>
</select>
<select id="end">
<option value="flagstaff, az">Flagstaff, AZ</option>
</select>


芝加哥
亚利桑那州弗拉格斯塔夫

这是完整的代码


#地图{
身高：100%；
}
开始：
芝加哥
圣路易斯
密苏里州乔普林
完:
俄克拉荷马城
阿马里洛
盖洛普
函数initMap（）{
var directionsService=新的google.maps.directionsService；
var directionsDisplay=新建google.maps.DirectionsRenderer；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：7，
中心：{lat:41.85，lng:-87.65}
});
方向显示.setMap（地图）；
var onChangeHandler=函数（）{
计算显示路线（方向服务、方向显示）；
};
document.getElementById（'start'）.addEventListener（'change'，onChangeHandler）；
document.getElementById（'end'）.addEventListener（'change'，onChangeHandler）；
}
函数calculateAndDisplayRoute（方向服务、方向显示）{
方向服务.路线({
来源：document.getElementById（'start'）。值，
目标：document.getElementById（'end'）。值，
travelMode:“驾驶”
}，功能（响应、状态）{
如果（状态=='OK'）{
方向显示。设置方向（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}

如果我理解正确，您希望在“选择元素”中设置默认值，并在页面加载时显示这些默认值之间的路由。在这种情况下，您应该在开始和结束选择框的选项中添加属性

selected

，并调用

calculateAndDisplayRoute（directionsService，directionsDisplay）位于initMap（）函数的末尾。查看以下示例，该示例显示了页面加载时芝加哥和Flagstaff之间的路线：

函数initMap（）{
var directionsService=新的google.maps.directionsService；
var directionsDisplay=新建google.maps.DirectionsRenderer；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：7，
中心：{lat:41.85，lng:-87.65}
});
方向显示.setMap（地图）；
var onChangeHandler=函数（）{
计算显示路线（方向服务、方向显示）；
};
document.getElementById（'start'）.addEventListener（'change'，onChangeHandler）；
document.getElementById（'end'）.addEventListener（'change'，onChangeHandler）；
计算显示路线（方向服务、方向显示）；
}
函数calculateAndDisplayRoute（方向服务、方向显示）{
方向服务.路线({
来源：document.getElementById（'start'）。值，
目标：document.getElementById（'end'）。值，
travelMode:“驾驶”
}，功能（响应、状态）{
如果（状态=='OK'）{
方向显示。设置方向（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}
#地图{
身高：100%；
}
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#浮动面板{
位置：绝对位置；
顶部：10px；
左：25%；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
文本对齐：居中；
字体系列：“Roboto”，“sans-serif”；
线高：30px；
左侧填充：10px；
}

开始：
芝加哥
圣路易斯
密苏里州乔普林
俄克拉荷马城
阿马里洛
盖洛普
亚利桑那州弗拉格斯塔夫
维诺娜
金门
巴斯托
圣贝纳迪诺
洛杉矶
完:
芝加哥
圣路易斯
密苏里州乔普林
俄克拉荷马城
阿马里洛
盖洛普
亚利桑那州弗拉格斯塔夫
维诺娜
金门
巴斯托
圣贝纳迪诺
洛杉矶

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="floating-panel">
<b>Start: </b>
<select id="start">
<option value="chicago, il">Chicago</option>
<option value="st louis, mo">St Louis</option>
<option value="joplin, mo">Joplin, MO</option>
</select>
<b>End: </b>
<select id="end">
<option value="oklahoma city, ok">Oklahoma City</option>
<option value="amarillo, tx">Amarillo</option>
<option value="gallup, nm">Gallup, NM</option>
</select>
</div>
<div id="map"></div>
<script>
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);

var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').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=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>