在每个输入地址 google 地图方向问题中获取异常

Question

我使用 google 地图和 api 个地方。填写输入起点，然后填写目的地并设置两点之间的方向。我的问题是在我收到此消息的每个填充输入中。任何想法请解决这个问题。我如何在搜索后设置每个点的标记，然后跟踪两个标记之间的路线 enter image description here

<div id="google-map"></div>
<div class="row">
    <div class="fieldlabels">
        <label>Origin: </label>
    </div>
    <div class="location-input">
        <input type="text" id="location1" name="origin" placeholder="Enter a start location..." required />
    </div>
</div>
<!-- Location 2 -->
<div class="row">
    <div class="fieldlabels">
        <label>Destination: </label>
    </div>
    <div class="location-input">
        <input type="text" id="location2" name="destination" placeholder="Enter a last location..." required />
    </div>
</div>

<script>
function initMap() {
    const directionsRenderer = new google.maps.DirectionsRenderer();
    const directionsService = new google.maps.DirectionsService();
    const map1 = new google.maps.Map(document.getElementById("google-map"), {
        zoom: 7,
        center: { lat: 48.85661, lng: 2.35222 },
        disableDefaultUI: true,
    });

    directionsRenderer.setMap(map1);
    directionsRenderer.setPanel(document.getElementById("sidebar"));

    const control = document.getElementById("floating-panel");

    map1.controls[google.maps.ControlPosition.TOP_CENTER].push(control);

    const onChangeHandler = function () {
        calculateAndDisplayRoute(directionsService, directionsRenderer);
    };

    document.getElementById("location1").addEventListener("change", onChangeHandler);
    document.getElementById("location2").addEventListener("change", onChangeHandler);

    originautocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */
        (document.getElementById("location1")),
        {
            types: ["geocode"],
        }
    );

    destinationautocomplete = new google.maps.places.Autocomplete(document.getElementById("location2"), {
        types: ["geocode"],
    });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer, status) {
    const start = document.getElementById("location1").value;
    const end = document.getElementById("location2").value;

    directionsService
        .route({
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.DRIVING,
        })
        .then((response) => {
            console.log(response);

            directionsRenderer.setDirections(response);
        })
        .catch((e) => window.alert("Directions request failed due to " + status));
}

window.initMap = initMap();
</script>

Answer 1

您的代码中有一个拼写错误：window.initMap = initMap(); 应该是 window.initMap = initMap;，因为它在 Google 示例中（即 https://developers.google.com/maps/documentation/javascript/examples/directions-simple），这样调用它会导致它会在 API 完成加载之前立即执行。

当开始或结束 <input> 字段不包含任何有用的内容时，这也有助于防止调用路线服务（实际上最好检查自动完成服务是否实际返回了有用的信息结果，如对以下问题的回答： or google maps Autocomplete with building not working for routing).

proof of concept fiddle

function initMap() {
  console.log("initMap");
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const directionsService = new google.maps.DirectionsService();
  const map1 = new google.maps.Map(document.getElementById("google-map"), {
    zoom: 7,
    center: {
      lat: 48.85661,
      lng: 2.35222
    },
    disableDefaultUI: true,
  });

  directionsRenderer.setMap(map1);
  directionsRenderer.setPanel(document.getElementById("sidebar"));

  const control = document.getElementById("floating-panel");

  map1.controls[google.maps.ControlPosition.TOP_CENTER].push(control);

  const onChangeHandler = function() {
    console.log("onChangeHandler");
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  };

  document.getElementById("location1").addEventListener("change", onChangeHandler);
  document.getElementById("location2").addEventListener("change", onChangeHandler);

  originautocomplete = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById("location1")), {
      types: ["geocode"],
    }
  );

  destinationautocomplete = new google.maps.places.Autocomplete(document.getElementById("location2"), {
    types: ["geocode"],
  });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer, status) {
  const start = document.getElementById("location1").value;
  const end = document.getElementById("location2").value;
  console.log("start=" + start + " end=" + end);
  // protect against no input.
  if (start == "" || end == "")
    return;

  directionsService
    .route({
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      console.log(response);

      directionsRenderer.setDirections(response);
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

window.initMap = initMap;

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */

#google-map {
  height: 80%;
}


/* 
 * Optional: Makes the sample page fill the window. 
 */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: "Roboto", "sans-serif";
  line-height: 30px;
  padding-left: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Directions Service</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="google-map"></div>
  <div class="row">
    <div class="fieldlabels">
      <label>Origin: </label>
    </div>
    <div class="location-input">
      <input type="text" id="location1" name="origin" placeholder="Enter a start location..." required/>
    </div>
  </div>
  <!-- Location 2 -->
  <div class="row">
    <div class="fieldlabels">
      <label>Destination: </label>
    </div>
    <div class="location-input">
      <input type="text" id="location2" name="destination" placeholder="Enter a last location..." required/>
    </div>
  </div>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap&v=weekly" defer></script>
</body>

</html>

在每个输入地址 google 地图方向问题中获取异常

Get exception in every input address google map directions problem

javascript

api

google-maps

google-directions-api

google-places