javascript - 如何在 google.maps.places.PlacesService(map).textSearch() 中添加回调函数

Question

我正在尝试查找输入的位置(request.location)与从文本搜索结果中获得的位置之间的距离

////function,google.maps.geometry.spherical.computeDistanceBetween (x,y) is what i am using to do that ,so how to insert the request.location value as x
var x = new google.maps.LatLng(52.395715, 4.888916);
var request = {
  location: x,
  radius: '500',
  query: 'restaurant'
};
var service = new google.maps.places.PlacesService(resultsMap);
service.textSearch(request, callback);

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var y = results[i].geometry.location;
      console.log(y);
    }
  }
}

Answer 1

您的代码结构方式，x 将在回调例程中可用。只是做:

  var y = results[i].geometry.location;
  +" km<br>";
  console.log(y);
  console.log((google.maps.geometry.spherical.computeDistanceBetween(x,y)/1000).toFixed(2)+" km");

proof of concept fiddle

代码片段:

function initialize() {
  var resultsMap = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  ////function,google.maps.geometry.spherical.computeDistanceBetween (x,y) is what i am using to do that ,so how to insert the request.location value as x
  var x = new google.maps.LatLng(52.395715, 4.888916);
  var requestLocation = new google.maps.Marker({
    position: x,
    map: resultsMap,
    title: "request position",
    icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
  });
  var request = {
    location: x,
    radius: '500',
    query: 'restaurant'
  };
  var service = new google.maps.places.PlacesService(resultsMap);
  service.textSearch(request, callback);

  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      var bounds = new google.maps.LatLngBounds();
      for (var i = 0; i < results.length; i++) {
        var y = results[i].geometry.location;
        document.getElementById("distance").innerHTML += "[" + i + "]  name:" + results[i].name + ", distance=" + (google.maps.geometry.spherical.computeDistanceBetween(x, y) / 1000).toFixed(2) + " km<br>";
        console.log(y);
        var marker = new google.maps.Marker({
          position: results[i].geometry.location,
          map: resultsMap,
          title: results[i].name
        });
        bounds.extend(marker.getPosition());
      }
      resultsMap.fitBounds(bounds);
    }

  }
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<div id="distance"></div>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>