Question

如果点击右上角的替代路线（“推荐路线”），我想更新左侧显示的Google地图。目前，它仅列出了替代路线和方向，但在点击路线时不会更新地图本身。我想要点击左侧的地图，一旦点击建议的路线，就会更新，因此它会显示特定的路线。 HTML：

str1= "Ram's birthplace is “Ayodhya” in Uttar Pradesh"
file = open("abc.txt","w")
file.write(str1)

JS：

<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>

这是工作预览：

https://jsbin.com/hamotuduxi/edit?output

Answer 1

您正在将map传递给setMap（），但它超出了范围。尝试将var map移动到全局范围，就在函数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);
}

此外，您从哪里获得calculateAndDisplayRoute函数中的颜色？

只需添加一个颜色数组，如示例中所示，它应该可以...

更新替代路线选择的地图

1 个答案: