位置基於正確的地圖中心爲Google Place服務附近搜索結果

Question

此代碼成功地從自動填充字段傳遞localStorage位置id變量（可以單擊「Map It」並在彈出窗口中輸入一個位置，在roadtripsharing .com來測試），並創建一個標記，信息窗口和圓圈。我包含一個默認位置{lat：39，lng：-105}，以防用戶直接訪問該頁面而不使用任何localStorage。然而，即使當我從主頁進入本地存儲時，出現的地方（在這種情況下，ATM機）都集中在美國科羅拉多斯普林斯附近，這是{lat：39，lng：-105 }。

我相信在宣佈

var request = { 
     location: mapit.getCenter(), 
     radius: 5000, 
     // query: 'atm' 
     types: ['atm'] 
     }; 

mapit.getCenter點（）應該是結果[0] .geometry.location（基於從主頁通過localStorage的地方ID標記的位置）。如何使附近的地方服務搜索結果使用此位置而不是始終{lat：39，lng：-105}？

function initMapIt() {  
    var mapit = new google.maps.Map(document.getElementById('mapitmap'), { 
     center: {lat: 39, lng: -105}, 
     zoom: 11, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var rtscircle = new google.maps.Circle({ 
     radius:document.getElementById("rtsfader").value*1609.34, 
     strokeWeight: 2, 
     strokeColor: "blue", 
      strokeOpacity: 0.9, 
     fillColor: "red", 
     fillOpacity: 0.15, 
      clickable: false, 
     map: mapit 
     }); 
    if (localStorage.placetopass !== null){ 
    var rtsgeocoder = new google.maps.Geocoder; 
    var newplace = localStorage.getItem('placetopass'); 
    rtsgeocoder.geocode({'placeId': newplace}, function(results, status) { 
    if (status === google.maps.GeocoderStatus.OK) { 
     if (results[0]) { 
     mapit.setZoom(11); 
     mapit.setCenter(results[0].geometry.location); 
     var rtsmarker = new google.maps.Marker({ 
      map: mapit, 
      position: results[0].geometry.location 
     }); 
     var rtsinfowindow = new google.maps.InfoWindow; 
     rtsinfowindow.setContent(results[0].formatted_address+'<p><a href="http://roadtripsharing.com/rate-place">Rate this place?</a></p>'); 
     rtsinfowindow.open(mapit, rtsmarker); 
     rtsmarker.addListener('click', function() { 
      rtsinfowindow.open(mapit, rtsmarker); 
     }); 
     rtscircle.setCenter(results[0].geometry.location); 
     jQuery("#rtsfader").change(function(){ 
      rtscircle.setRadius(document.getElementById("rtsfader").value*1609.34); 
     }); 
     }       
     else { 
     rtscircle.setCenter({lat: 39, lng: -105}); 
     } 
    } else { 
     rtscircle.setCenter({lat: 39, lng: -105}); 
    } 
    }); 
    document.getElementById("rts-aahs").play(); 
    } 
    var request = { 
    location: mapit.getCenter(), 
    radius: 5000, 
    // query: 'atm' 
    types: ['atm'] 
    }; 
    var infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(mapit); 
    service.nearbySearch(request, callback); 

function callback(results, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
    for (var i = 0; i < results.length; i++) { 
     createMarker(results[i]); 
     console.log(results[i]); 
    } 
    } 
    else 
     alert("Status not OK"); 
} 

function createMarker(place) { 
    // alert("createMarker function"); 
    var placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
    map: mapit, 
    position: place.geometry.location 
    }); 
    console.log(marker); 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(place.name); 
    infowindow.open(mapit, this); 
    }); 
} 

} 

Answer 1

問題是你在呼喚mapit.getCenter()之前你叫mapit.setCenter(results[0].geometry.location)。發生這種情況是因爲您在rtsgeocoder.geocode(...)的回調中更新了地圖中心，但在繼續執行nearbySearch之前，您並不等待它運行。您可以通過在getCenter/setCenter調用之前添加幾個console.log調用並觀察它們發生的順序來輕鬆驗證。

爲了解決這個問題，你可以嘗試這些方法之一：

1. 最多等待一些截止時間（例如，2秒）rtsgeocoder.geocode調用getCenter之前運行其回調（以及基於其上的nearbySearch） 。這不是非常強大，例如，一個較慢的網絡鏈接可能意味着它需要超過2秒鐘，而在此期間，您沒有任何標記可以顯示您的用戶。
2. 從您的rtsgeocoder.geocode回調中立即調用nearbySearch以及立即 - 甚至每次更改地圖中心。因爲向地圖添加大量標記會消耗內存並減慢頁面的速度，所以在獲取新標記時可能需要刪除舊標記。例如，通過在createMarker函數中添加一系列標記，並在每個函數上調用marker.setMap(null)。

我認爲選項2通常是更好的選擇。