2

私は JavaScript Google Maps API を使用して次の地図を作成しています: http://springhillfarm.com.au/locations-map/そして今、ユーザーが検索バーで自分の場所を検索したときに、最も近い 5 つのピンを一覧表示したいと思います。 .

「North Epping」のような郊外に入ってみると、次の関数を使用してマップがうまく移動します。

$("#searchclick").click(function(){

    var address = document.getElementById('searchbar').value;

    var address = address + " Australia";

    var geocoder = new google.maps.Geocoder();

    geocoder.geocode( { 'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {

            var latitude2 = results[0].geometry.location.lat();
            var longitude2 = results[0].geometry.location.lng();
            var relocate = new google.maps.LatLng(latitude2, longitude2);
            map.setCenter(relocate);

            map.setZoom(12);

            } //when status is OK

        }); // geocode
    });

しかし今、私は本当に最も近い5つのピンを返したいと思っています.

これはjavascriptでどのくらい可能ですか?

4

2 に答える 2

6

私はあなたの生産コードに気づきました-私が追加するかもしれないものは、大幅に最適化される可能性があります/すべきです! - 次を使用して、現在地と一連のマーカーを取得します。

var myLatlng = new google.maps.LatLng(-37.5759571, 143.8064523);
var marker0 = new google.maps.Marker({ position: new google.maps.LatLng(-37.7994512, 144.9643374), map: map, title:"Toothpicks, 720 Swanston Street Carlton 3052 VIC", icon:image });
var marker1 = new google.maps.Marker({ position: new google.maps.LatLng(-31.9097004, 115.8485327), map: map, title:"Good Life Shop, Shop 7 Dog Swamp Shopping Centre, Yokine WA 6060", icon:image });

等...

これらのマーカーが配列内にある場合、たとえば:

var markers = [ marker0, marker1, etc... ]

簡単なアプローチは、ピタゴラスを少し使用して、現在の場所とすべてのマーカーの間の距離を取得することです。何かのようなもの：

// make a new array of markers since you probably don't want to modify the existing array
var markersByDistance = [];
for ( var i = 0; i < markers.length; i++ ) {
    var marker = markers[i];

    // using pythagoras does not take into account curvature, 
    // but will work fine over small distances.
    // you can use more complicated trigonometry to 
    // take curvature into consideration
    var dx = myLatlng.longitude - marker.longitude;
    var dy = myLatlng.latitude - marker.latitude;
    var distance = Math.sqrt( dx * dx + dy * dy );

    markersByDistance[ i ] = marker;
    markersByDistance[ i ].distance = distance;

}

// function to sort your data...
function sorter (a,b) { 
    return a.distance > b.distance ? 1 : -1;
}

// sort the array... now the first 5 elements should be your closest points.
markersByDistance.sort( sorter );

Google Maps API がネイティブでこれを行う可能性があるため、これはすべて無意味かもしれません。

于 2012-09-04T07:16:57.523 に答える
0

ユーザーが検索した場合に 5 つのピンのみを表示することが理にかなっているのかどうかはわかりません。ユーザーがマップを移動しても、5 つのピンしか表示されない可能性があります...

代わりに、別のアプローチを使用します。ピンの完全なセットをロードするのが遅すぎる場合 (現在のように)、Google マップ ビューポートを AJAX スクリプトに送信し、このスクリプトが現在のビューポート内のすべてのピンを返すようにします。その後、現在のマップに関連するピンのみを描画できます。ユーザーが自分の場所を検索すると、ビューポートが変更され (新しい場所にズームします)、AJAX スクリプトを要求して、この領域のすべてのピンを取得します。これにより、よりシンプルでスケーラブルになります。

于 2012-09-04T06:25:17.740 に答える