2010-10-30 55 views
77

當我點擊地圖時,哪種方法可以找到最近的標記或標記?是否有一些函數可以幫助我做到這一點?Google Maps Api v3 - 查找最近的標記

這是google map api v3。

+1

您是否使用任何數據庫來存儲標記的座標? – 2010-10-30 08:14:45

+0

當然,標記位置存儲在MySQL數據庫中。 – user198003 2010-10-31 11:11:46

回答

98

首先,你必須添加事件偵聽

google.maps.event.addListener(map, 'click', find_closest_marker); 

然後創建通過標記列陣循環和使用haversine formula從點擊計算每個標誌物的距離的函數。

function rad(x) {return x*Math.PI/180;} 
function find_closest_marker(event) { 
    var lat = event.latLng.lat(); 
    var lng = event.latLng.lng(); 
    var R = 6371; // radius of earth in km 
    var distances = []; 
    var closest = -1; 
    for(i=0;i<map.markers.length; i++) { 
     var mlat = map.markers[i].position.lat(); 
     var mlng = map.markers[i].position.lng(); 
     var dLat = rad(mlat - lat); 
     var dLong = rad(mlng - lng); 
     var a = Math.sin(dLat/2) * Math.sin(dLat/2) + 
      Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong/2) * Math.sin(dLong/2); 
     var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
     var d = R * c; 
     distances[i] = d; 
     if (closest == -1 || d < distances[closest]) { 
      closest = i; 
     } 
    } 

    alert(map.markers[closest].title); 
} 

這跟蹤最近的標記並提醒其標題。

我有我的標誌作爲數組我的地圖對象

+0

很好的例子,但是,如果我點擊芝加哥附近的標記,我會在警報窗口中看到紐約。是一個小錯誤,所以芝加哥沒有正確列出,或其他? – user198003 2010-10-31 12:52:50

+0

是的,這是一個錯誤,我修正了它=) – Galen 2010-10-31 18:50:15

+2

不開放一箇舊的線程,但我試圖實現這一點,它似乎向東搜索,而不是找到最接近。因此,如果我搜索一個位置,它將向東搜索並找到最接近的位置,即使西面有一個REAL關閉。那有意義嗎? – LeeR 2011-05-23 22:35:55

6

你知道的Mysql Spatial extensions

您可以使用類似MBRContains(g1,g2)的東西。

+1

頁面未找到配對,所以您需要重新編輯第回答 – Val 2012-04-19 14:39:22

+0

@Val Done.Thanks – 2012-04-19 15:49:20

9

上面的公式並不適用於我,但我沒有任何問題。通過您的當前位置的功能,並遍歷標記的數組找到最接近:

function find_closest_marker(lat1, lon1) {  
    var pi = Math.PI; 
    var R = 6371; //equatorial radius 
    var distances = []; 
    var closest = -1; 

    for(i=0;i<markers.length; i++) { 
     var lat2 = markers[i].position.lat(); 
     var lon2 = markers[i].position.lng(); 

     var chLat = lat2-lat1; 
     var chLon = lon2-lon1; 

     var dLat = chLat*(pi/180); 
     var dLon = chLon*(pi/180); 

     var rLat1 = lat1*(pi/180); 
     var rLat2 = lat2*(pi/180); 

     var a = Math.sin(dLat/2) * Math.sin(dLat/2) + 
        Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(rLat1) * Math.cos(rLat2); 
     var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
     var d = R * c; 

     distances[i] = d; 
     if (closest == -1 || d < distances[closest]) { 
      closest = i; 
     } 
    } 

    // (debug) The closest marker is: 
    console.log(markers[closest]); 
} 
+1

如何填充'markers'數組?是通過使用'var marker1 = new google.maps.Marker({...})'創建一個標記嗎? – enchance 2012-09-29 13:42:29

+1

@enchance我不得不這樣做:'map.markers = map.markers || [];'然後爲每個標記'map.markers.push(marker);' – travis 2012-10-24 19:31:53

59

可以在google.maps.geometry.spherical命名空間中的computeDistanceBetween()方法。

+1

+1這是迄今爲止的最佳答案。 – bruchowski 2014-09-02 23:17:43

+0

這完全適合我 – ChrisRich 2014-10-21 00:28:33

+0

這個答案應該標記爲 – 2016-03-30 07:03:19

2

這裏是我的偉大工程的另一個函數,返回公里距離:

function distance(lat1, lng1, lat2, lng2) { 
     var radlat1 = Math.PI * lat1/180; 
     var radlat2 = Math.PI * lat2/180; 
     var radlon1 = Math.PI * lng1/180; 
     var radlon2 = Math.PI * lng2/180; 
     var theta = lng1 - lng2; 
     var radtheta = Math.PI * theta/180; 
     var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); 
     dist = Math.acos(dist); 
     dist = dist * 180/Math.PI; 
     dist = dist * 60 * 1.1515; 

     //Get in in kilometers 
     dist = dist * 1.609344; 

     return dist; 
    } 
15

我想對雷歐的建議擴大對任何人對如何計算最近的位置和實際提供迷茫一個工作解決方案:

我在markers陣列中使用標記eg var markers = [];

然後讓我們像下面的var location = new google.maps.LatLng(51.99, -0.74);

我們的立場,然後我們只是減少我們對標記我們有像這樣的位置:

markers.reduce(function (prev, curr) { 

    var cpos = google.maps.geometry.spherical.computeDistanceBetween(location.position, curr.position); 
    var ppos = google.maps.geometry.spherical.computeDistanceBetween(location.position, prev.position); 

    return cpos < ppos ? curr : prev; 

}).position 

什麼彈出是你最親密的標誌LatLng對象。

+0

真棒答案! – Wasa 2016-09-23 02:21:35

+0

@Wasa歡迎您:-) – Jonathan 2016-09-23 13:06:07

+0

整潔乾淨的答案! – TheeBen 2017-08-04 07:15:52

相關問題