javascript - 方向服务 Google API,可拖动来源
问题描述
首先,我将输入起点和终点,它将显示从起点 A 到终点 B 的显示路线。但是,我想让起点 A 可拖动,以便它重新计算路线并显示给我。
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeControl: false,
center: {lat: 1.317206, lng: 103.772240},
zoom: 13
});
new AutocompleteDirectionsHandler(map);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel'));
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('destination-input').addEventListener('change',
onChangeHandler);
}
function calculateAndDisplayRoute(directionsService,
directionsDisplay) {
var start = document.getElementById('origin-input').value;
var end = document.getElementById('destination-input').value;
directionsService.route({
origin: start,
destination: end,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
}
});
}
下面提供了 HTML 代码。
<body>
<input id="origin-input" class="controls" type="text"
placeholder="Enter an origin location">
<input id="destination-input" class="controls" type="text"
placeholder="Enter a destination location">
<div id="map"></div>
</body>
下面是我当前项目的截图。 截屏
解决方案
请试试:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -24.345, lng: 134.46} // Australia.
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
});
displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
directionsDisplay);
}
function displayRoute(origin, destination, service, display) {
service.route({
origin: origin,
destination: destination,
travelMode: 'DRIVING',
avoidTolls: true
}, function(response, status) {
if (status === 'OK') {
display.setDirections(response);
} else {
alert('Could not display directions due to: ' + status);
}
});
}
推荐阅读
- c# - c#迭代列表以合并具有相同字段的项目
- flutter - 用户第一次登录flutter firestore时如何处理空值
- java - 与 Java 11 兼容的最低 Jetty 版本
- typescript - 用于承载令牌的 Nativescript Vue HttpInterceptor
- regex - 与 vue-router 相关的问题,我无法从路径正则表达式中排除某些单词
- asp.net-core - 如何确保我在 EKS 中运行的 .NET Core 服务可以找到 https 端口?
- typescript - 泛型类型定义中带有等号的 extends 约束有什么效果?
- google-chrome - 如何在原始环境中启动 chrome 进行测试?
- c++ - C++ 取消引用和使用点运算符与使用箭头运算符有区别吗
- python - 为什么当“转换的字节”除以 2 时,PyAudio 流的音量有时会“减半”,有时会产生不需要的白噪声?