2012-09-04 136 views
2

最近的引腳我一直在使用JavaScript谷歌地圖API來構建以下地圖:http://springhillfarm.com.au/locations-map/,現在我想,當用戶在搜索欄中搜索其位置列出最近5針。查找谷歌地圖

試試進入像「北埃平」郊區和地圖將使用下面的函數以及移動:

$("#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這是什麼?

回答

0

我不知道,如果它纔有意義,顯示5針,如果用戶搜索 - 他可能會移動地圖,那麼他仍然會看到只有5針...

相反,我會去不同的方法:如果加載一組完整的引腳(如現在)太慢,只需將Google Maps視口發送到AJAX腳本,並讓該腳本返回當前視口中的所有引腳。然後,您只能繪製與當前地圖相關的引腳。當用戶搜索他的位置時,視口會發生變化(您將縮放到新位置),您請求AJAX腳本並獲取該區域中的所有針腳。這使得它更簡單,更具可擴展性。

+0

由「顯示五個引腳」我真正的意思,返回最接近的,所以我可以在HTML ... –

5

我注意到你的產品代碼 - 這我可以補充可以/應該高度優化的! - 你有你的位置和一堆使用標記的以下內容:

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地圖API可能會爲您完成本地化。

+0

確定這看起來不錯...我已經設置了我的陣列,並安裝了什麼你給我展示他們的名字:VAR標記= [marker0,標誌1,標誌2,marker3,等... –

+0

但由於某些原因你的代碼不工作 - 是因爲我做了數組不包含某些數據我需要給它? –

+0

看到我的代碼看這裏(鉻):查看源代碼:HTTP://springhillfarm.com.au/locations-map/ 3579線 –