返回与用户位置（地理位置）最近的 3 个位置并为他们列出这些位置

Posted 2023-02-23

【中文标题】返回与用户位置（地理位置）最近的 3 个位置并为他们列出这些位置

【英文标题】：Return 3 closest locations to a users location (geolocation) and list those locations for them

【发布时间】：2013-08-20 12:40:20

【问题描述】：

背景：

我正在开发一个使用 html/CSS/javascript 构建的网站/应用程序，它将使用地理位置 (Google Maps API) 来查找用户位置（地理位置）并返回给他们，例如最接近他们的 5 个水上乐园在他们当前所在的那个位置，因此他们将能够导航到这些位置之一。我正在使用 Google Fusion Tables 将结果返回给他们。

问题：

我已经能够成功...

找到用户位置并在此处放置标记（使用 Map API/地理位置） 返回 5 个位置中的 3 个并为这 3 个位置放置标记（我使用了 Fusion Tables 并将结果限制为 3 个）

我希望能够……

仅向用户返回 3 个最近的位置（即计算从用户位置到最近水上乐园的距离） 在我的 Fusion Table 中放置一个“侧边栏”或这 3 个位置的列表，详细说明名称、地址和其他字段

我用到目前为止的代码在这段代码下面做了一个小提琴。下面的代码是我的 Fusion Table 查询，我假设我需要对其进行更改才能获得 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/

任何帮助将不胜感激。我已经对这个问题进行了一段时间的研究，但无论出于何种原因，我都无法将它们拼凑在一起。任何帮助/资源将不胜感激！

【问题讨论】：

您需要使用GViz 或Fusion Tables API v1.0 查询FusionTable 以检索要放入侧边栏中的数据。 (example with sidebar using GViz.another example with sidebar using GViz)

太棒了，谢谢你。前几天我真的看到了你的网站，不知怎的，我错过了最重要的例子。

@geocodezip - 您是否碰巧在您的网站上有任何示例处理计算从用户位置到从我的 Fusion Tables 返回的最近点的距离，并写出距离（即 10 英里外、20 英里外等）？我认为这是一个 JSONP 请求。我现在有一个 Github 项目，如果你想查看任何代码 - (github.com/jamez14/TrailFinder) - 谢谢！！

@geocodezip 我能够成功获得最近的 3 个位置。现在我只需要让他们远离用户位置的距离/里程。如果你碰巧有时间帮忙，那就太好了。我很感激！

喜欢this example?

【参考方案1】：

您可以使用 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;

找到用户位置时的if语句：

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

【讨论】：

我一定会在明天早上测试这种方法。在阅读了一些 Places API 之后，您认为这是比 Fusion Tables 更好的方法吗？

如果您要查找的数据在 Places API 中，那肯定更简单。但请务必查看您的预计使用情况。如果日期不在 Places API 中，或者即使 一些 数据不在 Places API 中，如果您将数据放入 Fusion Table 中，您将不得不处理该问题，你有控制权。

我认为这就是 Places API 的问题所在。它不包含我需要的数据——通过 Fusion Tables 进行所有控制似乎是最好的选择。我一定会记住这一点，以备将来参考。谢谢你们！

【参考方案2】：

与1有关。（2.已通过geocodezip在cmets中回答）

在base_query 的orderBy 选项中使用spatial_relationship。

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

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

【讨论】：

澄清一下，我应该在 navigator.geolocation.getCurrentPosition(function (position) 中设置 lat 和 lng 还是将它们放在其他地方以使它们在全球范围内可用？

没关系，但它们必须在你为图层设置查询的范围内可见。

对于众多问题，我深表歉意，但无论出于何种原因，我都很难处理这个 Fusion 查询。无论如何，我使用您的建议制作了另一个小提琴，它似乎并没有限制我返回的结果。也许这对我来说是坏数据？我做了一些研究，但找不到任何有用的资源。我也在全球范围内提供 lat & lng：jsfiddle.net/jamez14/DteSj 如果您有时间回答其他问题，我将不胜感激！

有两个问题：1. 地理定位是一个异步过程，你不能设置对图层的查询（需要lat和lng从地理定位) 在getCurrentPosition 的成功回调执行之前。因此，最好的办法是将创建层的代码移至成功回调。 2： 必须使用字符串连接，否则lat 和lng 的值将不会应用于orderBy。 'ST_DISTANCE(Coordinates, LATLNG('+lat+','+lng+')' 。演示：jsfiddle.net/doktormolle/eUGFV

另外：您最好最初为地图设置一个默认中心。当用户拒绝访问地理定位时，Firefox 不会执行getCurrentPosition 的错误回调，在这种情况下，由于地图缺少（但需要）中心属性，地图永远不会被渲染。