Google Maps API - 获取最接近邮政编码的点 [英] Google Maps API - Getting closest points to zipcode

问题描述

我正在使用 Google Maps API v3 和 javascript 向网站添加地图.

I'm in the process of adding a map to a website using Google Maps API v3 and javascript.

我有一个地址列表并成功地将它们绘制在地图上.当用户输入邮政编码时，地图会重新以他们的位置为中心，显示最接近该点的标记.现在，我需要创建一个距离邮政编码最近的 3 或 5 个位置的列表视图，并带有行车方向链接.我被卡住了……欢迎提出建议.

I have a list of addresses and have successfully plotted them on the map. When the user types in a zip code, the map re-centers on their location showing the markers closest to that point. Now, I need to create a list view of the closest 3 or 5 locations to their zip code with links for driving direction. I'm stuck...and open for suggestions.

推荐答案

通常的解决方案是使用 google.maps.geometry.sphereal library computeDistanceBetween(from:LatLng, to:LatLng, radius?:number) 方法将数字减少到 10 左右，然后使用 距离矩阵 返回到这些位置的行驶距离，以便可以按行驶距离(实际行驶距离)对结果进行排序，并根据请求限制内的实际行驶距离减少到最近的 3 到 5 个位置.

The usual solution is to use the google.maps.geometry.spherical library computeDistanceBetween(from:LatLng, to:LatLng, radius?:number) method to reduce the number to about 10, then use the distance matrix return the driving distance to those locations so the results can be sorted by driving distance (actual travel distance), and reduced to the closest 3 to 5 locations by actual travel distance within the request limits.

示例(从列表中查找 3 个最近的地点)(从FusionTables比萨店"示例中借用的数据)

example (finds the 3 closest places from a list) (data borrowed from the FusionTables "pizza store" example)

  function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
    if (customerMarker) customerMarker.setMap(null);
        customerMarker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
    closest = findClosestN(results[0].geometry.location,10);
        // get driving distance
        closest = closest.splice(0,3);
        calculateDistances(results[0].geometry.location, closest,3);
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

function findClosestN(pt,numberOfResults) {
   var closest = [];
   document.getElementById('info').innerHTML += "processing "+gmarkers.length+"<br>";
   for (var i=0; i<gmarkers.length;i++) {
     gmarkers[i].distance = google.maps.geometry.spherical.computeDistanceBetween(pt,gmarkers[i].getPosition());
     document.getElementById('info').innerHTML += "process "+i+":"+gmarkers[i].getPosition().toUrlValue(6)+":"+gmarkers[i].distance.toFixed(2)+"<br>";
     gmarkers[i].setMap(null);
     closest.push(gmarkers[i]);
   }
   closest.sort(sortByDist);
   return closest;
}

function sortByDist(a,b) {
   return (a.distance- b.distance)
}

function calculateDistances(pt,closest,numberOfResults) {
  var service = new google.maps.DistanceMatrixService();
  var request =    {
      origins: [pt],
      destinations: [],
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.METRIC,
      avoidHighways: false,
      avoidTolls: false
    };
  for (var i=0; i<closest.length; i++) request.destinations.push(closest[i].getPosition());
  service.getDistanceMatrix(request, function (response, status) {
    if (status != google.maps.DistanceMatrixStatus.OK) {
      alert('Error was: ' + status);
    } else {
      var origins = response.originAddresses;
      var destinations = response.destinationAddresses;
      var outputDiv = document.getElementById('side_bar');
      outputDiv.innerHTML = '';

      var results = response.rows[0].elements;
      for (var i = 0; i < numberOfResults; i++) {
        closest[i].setMap(map);
        outputDiv.innerHTML += "<a href='javascript:google.maps.event.trigger(closest["+i+"],"click");'>"+closest[i].title + '</a><br>' + closest[i].address+"<br>"
            + results[i].distance.text + ' appoximately '
            + results[i].duration.text + '<br><hr>';
      }
    }
  });
}

上面的示例在信息窗口中带有获取路线"链接

这篇关于Google Maps API - 获取最接近邮政编码的点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！