位置基于 Google 附近搜索结果的正确地图中心

Question

此代码成功获取了从自动完成字段传递的localStorage place id变量（可以点击"Map It"并在出现的弹出窗口中输入一个place，在roadtripsharing.com进行测试），并创建标记、信息 window 和圆圈。我包含了一个默认位置 {lat: 39, lng: -105} 以防用户直接访问页面而不使用任何 localStorage。然而，即使我从主页转到本地存储中存储一些东西，出现的地方（在本例中为 ATM 机）都以美国科罗拉多斯普林斯为中心，即 {lat: 39, lng: -105 }.

我相信在宣布的那一刻

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

mapit.getCenter() 应该是 results[0].geometry.location （基于从主页传递的 localStorage Place ID 的标记位置）。如何让 Place Service Nearby Search 结果使用这个作为位置而不是总是 {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.setCenter(results[0].geometry.location) 之前调用 mapit.getCenter() 。发生这种情况是因为您在 rtsgeocoder.geocode(...) 的回调中更新了地图中心，但您没有等到运行才继续执行 nearbySearch。您可以通过在 getCenter/setCenter 调用之前添加几个 console.log 调用并观察它们发生的顺序来轻松验证这一点。

要解决此问题，您可以尝试以下方法之一：

在调用 getCenter（以及基于它的 nearbySearch）之前，等待 rtsgeocoder.geocode 到运行其回调的某个截止日期（例如 2 秒）。这不是很稳健，例如慢速网络 link 可能意味着它需要超过 2 秒，同时您没有任何标记可以显示给您的用户。

从您的 rtsgeocoder.geocode 回调中调用 nearbySearch 以及立即调用 - 甚至在每次地图中心更改时调用。因为向地图添加大量标记会消耗内存并降低页面速度，所以您可能希望在获得新标记时删除旧标记。例如，通过保留 createMarker 函数添加的标记数组并在每个标记上调用 marker.setMap(null)。

我认为选项 2 通常是更好的选择。

位置基于 Google 附近搜索结果的正确地图中心

Location based on correct map center for Google Place Service Nearby Search results

html

javascript

google-maps

google-maps-api-3

google-places-api