4

バックグラウンド：

私は HTML/CSS/Javascript で構築されたウェブサイト/アプリに取り組んでおり、地理位置情報 (Google Maps API) を使用してユーザーの場所 (地理位置情報) を見つけて返します。たとえば、その場所で最も近い上位 5 つのウォーター パークです。彼らは現在 にいるので、それらの場所の 1 つにナビゲートできます。Google Fusion Tables を使用して結果を返しています。

質問：

私は成功することができました...

  • ユーザーの位置を見つけてそこにマーカーを置きます (Map API/geolocation を使用)
  • 5 つの場所のうち 3 つを返し、それら 3 つの場所にマーカーを置きます (私は Fusion Tables を使用し、結果を 3 つに制限しました)

できるようになりたい…</p>

  1. ユーザーに最も近い 3 つの場所のみを返します (つまり、ユーザーの場所から最寄りのウォーター パークまでの距離を計算します)。
  2. これら 3 つの場所の「サイドバー」またはリスト、詳細な名前、住所、およびその他のフィールドを Fusion Table に配置します。

私はこれまでに持っているもので、このコードの下にフィドルを作成しました。以下のコードは、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 に答える