Question

我使用Google Maps JavaScript API显示路线和文字方向：

JS：

var geocoder;
var map;
var search_lat;
var search_lng;

function initMap() {

    var myLatLng = {
        lat: 38.5803844, 
        lng: -121.50024189999999
    };

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 16,
      center: myLatLng,
    });

    geocoder = new google.maps.Geocoder();

    document.getElementById('search_button').addEventListener('click', function() {
      getDirectionsByAddress(geocoder, map);
    });

    var locations = <?php echo json_encode($locations_array); ?>;

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][5], locations[i][6]),
            animation: google.maps.Animation.DROP,
            icon: icon_image,
            map: map
        });
    }

}

function getDirectionsByAddress() {

    // GET THE SEARCH ADDRESS

    var address = document.getElementById('address').value;
    console.log('search address: ' + address);

    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            search_lat = results[0].geometry.location.lat();
            search_lng = results[0].geometry.location.lng();
            console.log('search address coordinates: ' + search_lat + ', ' + search_lng);
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });

    // INITIALIZE GOOGLE MAPS DIRECTIONS SERVICE 

    var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;

    directionsDisplay.setMap(map);
   directionsDisplay.setPanel(document.getElementById('directions'));

    calculateAndDisplayRoute(directionsService, directionsDisplay);

    // CHECK THE MODE OF TRAVEL 

    document.getElementById('mode').addEventListener('change', function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    });

    // CALCULATE THE DIRECTIONS BASED ON ADDRESS ENTERED AND MODE OF TRAVEL

    function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        console.log('search address coordinates: ' + search_lat + ', ' + search_lng);
        var selectedMode = document.getElementById('mode').value;
        directionsService.route({
          origin: {lat: search_lat, lng: search_lng},
          destination: {lat: 38.5803844, lng: -121.50024189999999},
          travelMode: google.maps.TravelMode[selectedMode]
        }, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
    }

}

我遇到了getDirectionsByAddress函数问题。当我搜索某个位置并点击＆＃34;搜索按钮＆＃34;第一次，没有任何事情发生。在第二次单击＆＃34;搜索按钮＆＃34;时，路线在地图上成功绘制并显示方向，但方向显示两次（似乎方向是在第一次点击时计算的，但仅限于在第二次点击时，他们正在显示）。如果我第三次搜索，则会添加第三组指示并反复重复。

似乎我需要在每次搜索时重置lat和lng值。我试过了：

delete search_lat;
delete search_lng;

calculateAndDisplayRoute函数的内部和末尾。没有运气。

HTML：

<div id="map"></div>

<div id="directions">

    <h3>Directions</h3>

</div>

<div class="search_block">

    <input type="text" name="address" id="address" class="address" placeholder="Where are you coming from?" />

</div>

<div class="search_block">    

    <select name="travel_mode" id="mode">
        <option>DRIVING</option>
        <option>WALKING</option>
        <option>BICYCLE</option>
        <option>TRANSIT</option>
    </select>

</div>

<div class="search_block">

    <button id="search_button" onclick="getDirectionsByAddress();">Search</button>

</div>

问题：如何在每次搜索时使用一组坐标刷新方向？

Answer 1

search_lat和search_lng为空，直到地理编码器返回结果。
地理编码器是异步的，直到您将第一次调用发送到路线服务后，其结果才会回来。

提示是javascript控制台中的此错误：Uncaught TypeError: Cannot read property 'b' of null

将对Directions服务的调用移动到地理编码器的回调函数中（数据存在的位置/时）。

修复此问题，并创建DirectionsRenderer的单个实例，它适用于我。

proof of concept fiddle

代码段

google.maps.event.addDomListener(window, "load", initMap);
var geocoder;
var map;
var search_lat;
var search_lng;
var directionsDisplay;
var directionsService;

function initMap() {

  var myLatLng = {
    lat: 38.5803844,
    lng: -121.50024189999999
  };

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: myLatLng,
  });
  directionsDisplay = new google.maps.DirectionsRenderer;
  directionsService = new google.maps.DirectionsService;


  geocoder = new google.maps.Geocoder();

  document.getElementById('search_button').addEventListener('click', function() {
    getDirectionsByAddress(geocoder, map);
  });

  var locations = []; //<?php echo json_encode($locations_array); ?>;

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) {

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][5], locations[i][6]),
      animation: google.maps.Animation.DROP,
      icon: icon_image,
      map: map
    });
  }

}

function getDirectionsByAddress() {

  // GET THE SEARCH ADDRESS

  var address = document.getElementById('address').value;
  console.log('search address: ' + address);

  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      search_lat = results[0].geometry.location.lat();
      search_lng = results[0].geometry.location.lng();
      console.log('search address coordinates: ' + search_lat + ', ' + search_lng);
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });

  // INITIALIZE GOOGLE MAPS DIRECTIONS SERVICE 

  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directions'));



  // CHECK THE MODE OF TRAVEL 

  document.getElementById('mode').addEventListener('change', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });

  // CALCULATE THE DIRECTIONS BASED ON ADDRESS ENTERED AND MODE OF TRAVEL

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    console.log('search address coordinates: ' + search_lat + ', ' + search_lng);
    var selectedMode = document.getElementById('mode').value;
    directionsService.route({
      origin: {
        lat: search_lat,
        lng: search_lng
      },
      destination: {
        lat: 38.5803844,
        lng: -121.50024189999999
      },
      travelMode: google.maps.TravelMode[selectedMode]
    }, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="directions">

  <h3>Directions</h3>

</div>

<div class="search_block">

  <input type="text" name="address" id="address" class="address" placeholder="Where are you coming from?" value="San Franscisco, CA" />

</div>

<div class="search_block">

  <select name="travel_mode" id="mode">
    <option>DRIVING</option>
    <option>WALKING</option>
    <option>BICYCLE</option>
    <option>TRANSIT</option>
  </select>

</div>

<div class="search_block">

  <button id="search_button" onclick="getDirectionsByAddress();">Search</button>

</div>
<div id="map"></div>

Google Maps API路线服务显示文字路线重复

1 个答案: