谷歌地圖API路線服務顯示文本路線重複

Question

我使用的是谷歌地圖的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功能麻煩。當我搜索一個位置並且第一次點擊「搜索按鈕」時，沒有任何反應。在第二次點擊「搜索按鈕」時，路線在地圖上成功繪製並顯示方向，但方向顯示兩次（似乎方向是在第一次點擊時計算出來的，但僅在第二次點擊時計算出來他們正在顯示）。如果我第三次搜索，第三組方向就會被加上，並且一遍又一遍地重複。

看來我需要在每次搜索期間重置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都爲空，直到地理編碼器返回結果。
• 地理編碼器是異步的，其結果在您將第一次調用放置到directions服務之後纔會回來。

的提示是此錯誤在JavaScript控制檯：Uncaught TypeError: Cannot read property 'b' of null

移動呼叫到路線服務到用於地理編碼的回調函數（其中/當存在所述數據）。

修復並創建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>