返回距离用户位置（地理位置）最近的3个位置，并将这些位置列出来供用户选择。

Question

背景：

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

问题：

我已经成功地...

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

我想要能够...

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

我在下面的代码中创建了一个Fiddle，展示了我目前所拥有的内容。下面的代码是我的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/

任何帮助都将不胜感激。我已经花了一些时间研究这个问题，但出于某种原因，我无法将其全部整合起来。非常感谢您提供的任何帮助/资源！

- james

---

您需要使用 GViz 或 Fusion Tables API v1.0 中的任一种方式查询 FusionTable，以检索数据并将其放入侧边栏中。 （使用 GViz 的带有侧边栏的示例。 使用 GViz 的另一个带有侧边栏的示例） - geocodezip

太棒了，谢谢你。实际上我前几天就发现了你的网站，不知怎么错过了最重要的例子。 - james

@geocodezip - 你的网站上是否有任何示例，可以计算用户位置与从我的Fusion Tables返回的最近点之间的距离，并输出距离（例如：10英里，20英里等）？我假设这是一个JSONP请求。如果您想查看任何代码，我现在有一个Github项目 - （https://github.com/jamez14/TrailFinder）- 谢谢！ - james

@geocodezip 我已成功获得了最接近用户的三个位置。现在我只需要获取它们与用户位置的距离/英里数。如果您有时间帮助，那就太好了。非常感谢！ - james

像这个例子一样？ - geocodezip

是的 - 看起来它包含了一些肯定会让我开始的部分。我相信 codeAddress() 和随后的函数将与我的现有代码很好地融合。再次感谢！ - james

Answer 1

与1有关 (2已由geocodezip在评论中回答)

在base_query的orderBy选项中使用空间关系。

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

...其中lat和lng必须填入由navigator.geolocation返回的值(这意味着您必须在navigator.geolocation.getCurrentPosition的回调函数中创建图层或至少设置图层的查询)。

- Dr.Molle

---

只是想澄清一下，我应该在navigator.geolocation.getCurrentPosition(function (position) {中设置lat和lng，还是将它们放在其他地方以使它们全局可用？ - james

不过这并不重要，但是它们必须在你为该图层设置查询的范围内可见。 - Dr.Molle

非常抱歉频繁地向您提问，但出于某种原因，我对这个Fusion查询有些困难。无论如何，我根据您的建议又制作了一个Fiddle，但似乎并没有限制我的返回结果。也许是我的数据有问题？我做了一些研究，但没有找到任何有用的资源。我还将lat＆lng全局可用:http://jsfiddle.net/jamez14/DteSj/如果您有时间回答其他问题，我会非常感激！ - james

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

此外，最好为地图最初设置一个默认中心。当用户拒绝访问地理位置信息时，Firefox不会执行getCurrentPosition的错误回调函数，在这种情况下，由于缺少（但必需的）地图中心属性，地图永远不会被渲染。 - Dr.Molle

非常好 - 再次感謝您的额外幫助！我真的非常非常感激！ - james

Answer 2

你可以使用 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。

- hwsw

---

明天早上我一定会测试这种方法。在阅读了一些地点API之后，你认为这比融合表更好吗？ - james

如果你要查找的数据在Places API中，那么这肯定更简单。但是一定要考虑你预计的使用情况。如果日期不在Places API中，或者即使有些数据不在Places API中，你也必须处理它们。如果你把数据放在Fusion Table中，你就可以掌控了。 - geocodezip

我认为这就是我在使用Places API时遇到的问题所在。它没有包含我需要的数据 - 通过Fusion Tables拥有所有控制权似乎是最好的选择。不过，我一定会记住这个建议以备将来参考。非常感谢你们两位！ - james