4

背景:

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

问题:

我已经能够成功...

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

我希望能够……</p>

  1. 仅返回与用户最近的 3 个位置(即计算从用户位置到最近水上乐园的距离)
  2. 在我的 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/

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

4

2 回答 2

3

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

orderBy在 的-option 中使用 spatial_relationship base_query

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

...在哪里lat并且lng必须用返回的值填充navigator.geolocation(这意味着您必须创建图层或至少在 的回调中设置图层的查询navigator.geolocation.getCurrentPosition

于 2013-08-18T20:50:17.970 回答
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

于 2013-08-18T17:39:45.453 回答