Question

我需要一个简单的应用程序，它可以从不同的点创建不同的路径。我在控制台中没有收到任何错误，也不知道失败的原因。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AAASASASD</title>
<style>
  #map {
    width: 500px;
    height: 400px;
  }
</style>
</head>
<body>
<h2 style="text-align: center;">Maps 1</h2>
<select id="localizacion">
  <option value="28.123546, -15.436257">Localización 1</option>
  <option value="28.05, -15.44"> Localizacion 2</option>
</select>
<select id="modo">
  <option value="WALKING">Caminando</option>
  <option value="DRIVING">Coche</option>
  <option value="TRANSIT">Guagua</option>
  <option value="BICYCLING">Bicicleta</option>
</select>
<div id="map"></div>
<script>
  function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var mapDiv = document.getElementById('map');
    var map = new google.maps.Map(mapDiv, {
      center: {lat: 28.099261, lng: -15.419831},
      zoom: 15
    });

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

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var o = document.getElementById('localizacion').value;
    var d = "28.099261, -15.419831";
    modo = document.getElementById('modo').value;
    a={origin:o,destination:d,travelMode:google.maps.TravelMode[modo]};
    directionsService.route((a,function(a,status){
      if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(a);
      }
    }));
  }



</script>



<script src="https://maps.googleapis.com/maps/api/js?key=FAKEKEY&callback=initMap"
    async defer></script>
</body>
</html>

有什么问题？理论上，我计算从一个点到我的位置的路线，但没有显示。

Answer 1

2件事：

1：括号太多了。替换为：

directionsService.route(a,function(a,status){
  if (status === google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(a);
  }
});

2：directionsDisplay不知道在哪里放置结果。把这一行：

directionsDisplay.setMap(map);

初始化地图后。

谷歌地图 - 来自不同点的不同路线

1 个答案: