更新替代路线选择的地图 [英] Update map on alternative route select
本文介绍了更新替代路线选择的地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当点击右上角的替代路线（建议路线）时，我想更新左侧显示的谷歌地图。目前，它只列出其他路线和方向，但不会在点击路线时更新地图本身。我想在左侧的地图上点击一下推荐路线中的某个地图，以便它显示特定的路线。
HTML：
< div id =floating-panel>
< b> Do：< / b>
< select id =start>
< option value =Bosis，Valjevo> Bosis，Valjevo< / option>
< / select>
< b> Od：< / b>
< select id =end>
<选项禁用选定值> - Izaberite - < / option>
< option value =贝尔格莱德，塞尔维亚>贝尔格莱德，塞尔维亚< / option>
< option value =诺维萨德，塞尔维亚>诺维萨德，塞尔维亚< / option>
< option value =Užice，Serbia>Užice，塞尔维亚< / option>
< option value =洛兹尼察，塞尔维亚>洛兹尼察，塞尔维亚< / option>
< / select>
< / div>
< div id =map>< / div>
< div id =setPanel>< / div>
< script async defer
src =https://maps.googleapis.com/maps/api/js?callback=initMap>
< / script>
JS：
函数initMap（）{
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：15，
center：{lat：44.291971，lng：19.9722431}
}）;
directionsDisplay.setMap（map）;
var onChangeHandler = function（）{
document.getElementById（setPanel）。innerHTML =; // 这个！
calculateAndDisplayRoute（directionsService，directionsDisplay）;
};
document.getElementById（'start'）。addEventListener（'change'，onChangeHandler）;
document.getElementById（'end'）。addEventListener（'change'，onChangeHandler）;
函数calculateAndDisplayRoute（directionsService，directionsDisplay）{
directionsService.route（{
origin：document.getElementById（'start'）。value，
destination：document.getElementById（'end'）。value，
provideRouteAlternatives：true，
travelMode：'DRIVING'
}，function（response，status）{
if（状态==='OK'）{
//设置循环从response.routes数组迭代遍历
console.log（response.routes.length）;
console .log（response.routes）;
for（var j = 0; j< response.routes.length; j ++）{
var dirDisplay = new google.maps .DirectionsRenderer（）;
dirDisplay.setMap（map）;
dirDisplay.setDirections（response）;
dirDisplay.setPanel（document.getElementById（setPanel））;
dirDisplay.setRouteIndex（J）;
directionsDisplay.setDirections（response）;
dirDisplay.setOptions（{
draggable：true，
hideRouteIndex：true，
polylineOptions：{
strokeColor：colors [j]，
strokeOpacity：1.0 ，
strokeWeight：5
}
}）;
$ b} else {
window.alert（'由于'+状态'导致请求失败）;
}
}）;
$ / code> 这是工作预览：
https://jsbin.com/hamotuduxi/edit?output
解决方案
您将映射传递给setMap（），并且它超出了范围。
尝试将var映射移动到全局作用域，就在你的函数initMap之上;
var colors = [' ＃1FD2CF'，'＃FF4000'，'＃FFFF00'];
var map;
函数initMap（）{
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
map = new google.maps.Map（document.getElementById（'map'），{
zoom：15，
center：{lat：44.291971，lng：19.9722431}
}）;
directionsDisplay.setMap（map）;
var onChangeHandler = function（）{
document.getElementById（setPanel）。innerHTML =;
calculateAndDisplayRoute（directionsService，directionsDisplay）;
};
document.getElementById（'start'）。addEventListener（'change'，onChangeHandler）;
document.getElementById（'end'）。addEventListener（'change'，onChangeHandler）;
}
另外，您从哪里获得calculateAndDisplayRoute函数中的颜色？
只需添加如示例中所示的颜色数组，它就可以工作...
I'd like to update google map shown on the left when alternative route from the top-right is clicked ("suggested routes"). Currently it only list alternative routes and directions under, but won't update map itself when the route is clicked. I'd like map on the left to be updated once something from the suggested routes is clicked, so it shows specific route instead. HTML:
<div id="floating-panel">
<b>Do: </b>
<select id="start">
<option value="Bosis, Valjevo">Bosis, Valjevo</option>
</select>
<b>Od: </b>
<select id="end">
<option disabled selected value> -- Izaberite -- </option>
<option value="Belgrade, Serbia">Belgrade, Serbia</option>
<option value="Novi Sad, Serbia">Novi Sad, Serbia</option>
<option value="Užice, Serbia">Užice, Serbia</option>
<option value="Čačak, Serbia">Čačak, Serbia</option>
<option value="Loznica, Serbia">Loznica, Serbia</option>
</select>
</div>
<div id="map"></div>
<div id="setPanel"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
JS:
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: {lat: 44.291971, lng: 19.9722431}
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
document.getElementById("setPanel").innerHTML = ""; // THIS ONE!
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,
provideRouteAlternatives: true,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
// set loop to iterate through from the response.routes array
console.log(response.routes.length);
console.log(response.routes);
for (var j = 0; j < response.routes.length; j++){
var dirDisplay = new google.maps.DirectionsRenderer();
dirDisplay.setMap(map);
dirDisplay.setDirections(response);
dirDisplay.setPanel(document.getElementById("setPanel"));
dirDisplay.setRouteIndex(j);
directionsDisplay.setDirections(response);
dirDisplay.setOptions({
draggable: true,
hideRouteIndex: true,
polylineOptions : {
strokeColor: colours[j],
strokeOpacity: 1.0,
strokeWeight: 5
}
});
}
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
Here's working preview:
https://jsbin.com/hamotuduxi/edit?output
解决方案
You are passing map to setMap() and it is out of scope. Try to move the var map to the global scope, just above your function initMap;
var colours = ['#1FD2CF', '#FF4000', '#FFFF00'];
var map;
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: {lat: 44.291971, lng: 19.9722431}
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
document.getElementById("setPanel").innerHTML = "";
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
Also, where do you get the colours from in your calculateAndDisplayRoute function?
Just add an array of colours as shown in the example and it should work...
这篇关于更新替代路线选择的地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
