将3个最近的位置返回到用户位置(地理位置)并列出这些位置

时间:2013-08-18 17:02:19

标签: javascript jquery google-maps-api-3 geolocation google-fusion-tables

背景:

我正在开发一个使用HTML / CSS / Javascript构建的网站/应用程序,它将使用地理位置(Google Maps API)查找用户位置(地理位置)并将其返回,例如,返回他们的前5个最近的水上乐园在他们当前所在的位置,他们将能够导航到其中一个位置。我正在使用Google Fusion Tables将结果返回给他们。

问题:

我能够成功地......

  • 找到用户位置并在其中放置标记(使用Map API / geolocation)
  • 返回5个位置中的3个并将标记放下3个(我使用Fusion Tables并将结果限制为3个)

我希望能够......

  1. 仅向用户返回 3个最近的位置(即计算从用户位置到最近水上公园的距离)
  2. 放置“侧边栏”或这3个位置的列表,详细说明我的Fusion Table中的名称,地址和其他字段
  3. 我用这个代码制作了一个小提琴。下面的代码是我的Fusion Table查询,我假设我需要进行更改才能获得最近的3个位置(问题#1)。列出这些位置的问题#2可能会使用我在小提琴中的所有代码。

    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/

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

2 个答案:

答案 0 :(得分:3)

与1.相关(2.已在geocodezip的评论中回答)

orderBy的{​​{1}}选项中使用spatial_relationship。

base_query

...其中orderBy: 'ST_DISTANCE(Coordinates, LATLNG(lat,lng)) lat必须使用lng返回的值进行填充(这意味着您必须创建图层或至少为图层设置查询在navigator.geolocation

的回调中

答案 1 :(得分: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;

如果找到用户位置时发出声明:

var request = { location: pos, radius: '500', types: ['store'] };

service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);  

在地图init之后:

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