Ort basierend auf dem korrekten Kartencenter für Google Places Service In der Nähe Suchergebnisse

Question

Dieser Code akzeptiert erfolgreich eine localStorage-Orts-ID-Variable, die von einem AutoVervollständigen-Feld übergeben wurde (klicken Sie auf "Karte") und geben Sie einen Ort im angezeigten Pop-up-Fenster ein .com zu testen) und erstellt einen Marker, ein Informationsfenster und einen Kreis. Ich habe einen Standardspeicherort {lat: 39, lng: -105} für den Fall eingefügt, dass Benutzer direkt auf die Seite zugegriffen haben, ohne dass localStorage verwendet wurde. Aber selbst wenn ich von der Homepage gehe und etwas im lokalen Speicher abspeichere, sind die Orte, die sich ergeben (in diesem Fall ATM-Maschinen) alle um Colorado Springs, USA, zentriert, das ist das {lat: 39, lng: -105 }.

ich an dem Punkt glauben

deklarieren

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

mapit.getCenter() sollten die Ergebnisse [0] .geometry.location (die Position der Markierung auf dem von der Homepage geleitet local Platz ID basiert) sein. Wie man den Place Service in der Nähe platziert Suchresultat benutze dies als Ort anstatt immer {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

Das Problem ist, dass Sie mapit.getCenter()vor rufen Sie mapit.setCenter(results[0].geometry.location) nennen. Dies geschieht, weil Sie die Kartenzentrale im Callback von rtsgeocoder.geocode(...) aktualisieren, aber Sie warten nicht, bis das ausgeführt wird, bevor Sie mit der nearbySearch fortfahren. Sie können dies leicht überprüfen, indem Sie ein paar console.log Anrufe kurz vor den getCenter/setCenter Anrufe hinzufügen und deren Reihenfolge beobachten.

Um dies zu beheben, können Sie eine dieser Ansätze versuchen könnten:

1. wartet für rtsgeocoder.geocode bis zu einem gewissen Frist (zB 2 Sekunden) seinen Rückruf laufen, bevor getCenter (und die nearbySearch darauf basierenden) Aufruf . Dies ist nicht sehr robust, zum Beispiel eine langsame Netzwerkverbindung könnte bedeuten, dass es mehr als 2 Sekunden dauert, und in der Zwischenzeit haben Sie keine Markierungen, um Ihren Benutzer zu zeigen.
2. Anruf nearbySearch von Ihrem Rückruf sowie sofort - oder sogar jedes Mal, wenn das Kartencenter geändert wird. Da das Hinzufügen vieler Markierungen zu einer Karte Speicher verbrauchen und die Seite verlangsamen kann, möchten Sie wahrscheinlich die alten Markierungen entfernen, wenn Sie die neuen erhalten. Zum Beispiel, indem Sie ein Array von Markern beibehalten, die von Ihrer createMarker-Funktion hinzugefügt wurden, und marker.setMap(null) auf jedem von ihnen aufrufen.

Ich denke, Option 2 ist in der Regel die bessere Wahl.