返回离用户位置(地理位置）最近的3个位置，并列出这些位置

Return 3 closest locations to a users location (geolocation) and list those locations for them

本文关键字：位置 3个 最近 用户 地理位置 返回      更新时间：2023-09-26

背景：

我正在开发一个使用HTML/CSS/Javascript构建的网站/应用程序，该应用程序将使用地理定位（Google Maps API）找到用户位置（地理位置），并返回他们当前所在位置距离他们最近的前5个水上公园，以便他们能够导航到其中一个位置。我正在使用Google Fusion Tables将结果返回给他们。

问题：

我已经能够成功地。。。

  • 找到用户位置并在那里放置标记（使用Map API/geolocation）
  • 返回5个位置中的3个，并为这3个位置标记（我使用了Fusion Tables&将结果限制为3个）

我想能够…

  1. 只将3个最近的位置返回给用户（即计算用户位置到最近水上公园的距离）
  2. 放一个"侧边栏"或这3个位置的列表，详细说明我的Fusion表中的名称、地址和其他字段

我在这个代码下面做了一个Fiddle。下面的代码是我的Fusion表查询，我认为这是我需要对其进行更改以获得3个最近的位置（问题#1）。问题2列出了这些位置，可能会使用我Fiddle中的所有代码。

var base_query = {
    select: 'Location',
    from: '1MsmdOvWLKNNrtKnmoEf2djCc3Rp_gYmueN4FGnc',
    limit: 3
};
var ftLayer = new google.maps.FusionTablesLayer({
    map: map,
    query: $.extend({}, base_query)
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < base_query.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(base_query[i][1], base_query[i][2]),
        map: map
    });
    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(base_query[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
};
var signChange = function () {
    var options = {
        query: $.extend({}, base_query)
    };
};

http://jsfiddle.net/jamez14/bRLaH/2/

如有任何帮助，我们将不胜感激。我对这个问题研究了一段时间，但无论出于什么原因，我都无法把它拼凑起来。如有任何帮助/资源，我们将不胜感激！

与1相关。（2.已在geocodezip的评论中得到回答）

在base_query的orderBy-选项中使用spatial_relationship。

orderBy: 'ST_DISTANCE(Coordinates, LATLNG(lat,lng))

其中lat和lng必须用navigator.geolocation返回的值填充（这意味着您必须创建层或至少在navigator.geolocation.getCurrentPosition的回调中设置层的查询）

您可以使用Google Places API。

文档：https://developers.google.com/places/documentation/search

支持的位置类型：https://developers.google.com/places/documentation/supported_types

在你收到用户的位置后，用你的位置和相关类型提出这样的请求：

https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&types=food&name=harbour&sensor=false&key=AddYourOwnKeyHere

这是一把基于你的小提琴，没有使用融合表：http://jsfiddle.net/iambnz/M9KrK/

将此添加到您的库调用中：

&libraries=places

将此添加到您的代码中：

全局变量：

var service;

如果语句当你找到用户的位置：

var request = { location: pos, radius: '500', types: ['store'] };
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);

映射初始化后：

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}
   function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  }); 
}

我希望这能为你指明正确的方向。

来自@geocodezip的侧边栏+FT用法示例：http://www.geocodezip.com/geoxml3_test/v3_FusionTables_Watershed_Stewards_Map_sidebar2.html

相关文章：