在我的地理位置上查找最近的標記谷歌地圖API V3

Question

我有一個腳本，顯示了我在頁面中實現的Google地圖，目前它顯示了一系列由雷達搜索生成的標記。我想我可能已經把這些生成的標記放入數組中，但我不知道如何做到這一點。我也查了一下「半正式公式」，因爲這似乎是計算地理定位和陣列中點之間距離的一種方法。我希望能夠使用標籤ID「#findMe」執行搜索，因此單擊它可以找到距我的地理位置最近的標記，然後用它打印警報。我已經在做方法建立的谷歌API，但我認爲我需要把標記放在一個數組中。

修改代碼 - 這是正確的Dr.Molle？

jQuery(function($){ 

    var $overlay = $('.overlay'), 
     resize = true, 
     map; 
    var service; 
    var marker = []; 
    var pos; 
    var infowindow; 
    var placeLoc 


function initialize() { 
    /*var mapOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(-34.397, 150.644), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

}*/ 
var mapOptions = { 
    zoom: 15 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    // Try HTML5 geolocation 
    if(navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 

      var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 

     var request = { 
     location:pos, 
     radius:1000, 

    }; 

    infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 
    service.nearbySearch(request,callback); 
     pos = new google.maps.LatLng(position.coords.latitude, 
             position.coords.longitude); 


     infowindow = new google.maps.InfoWindow({ 
     map: map, 
     position: pos, 
     content: 'You Are Here' 
     }); 
     $('#findMe').data('pos',pos); 

     map.setCenter(pos); 
    }, function() { 
     handleNoGeolocation(true); 
    }); 
    } else { 
    // Browser doesn't support Geolocation 
    handleNoGeolocation(false); 
    } 



    function callback(results, status) { 
     var markers = []; 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
    for (var i = 0; i < results.length; i++) { 
     markers.push(createMarker(results[i])); 
    } 
    } 
    $('#findMe').data('markers',markers); 
} 
} 

function createMarker(place) { 
    placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: place.geometry.location, 
    icon: { 
     path: google.maps.SymbolPath.CIRCLE, 
     scale: 8, 
     fillColor:'00a14b', 
     fillOpacity:0.3, 
     fillStroke: '00a14b',  
     strokeWeight:4, 
     strokeOpacity: 0.7 
    }, 



    }); 


    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(place.name); 
    infowindow.open(map, this); 
    }); 
    return marker; 
} 

function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
    var content = 'Error: The Geolocation service failed.'; 
    } else { 
    var content = 'Error: Your browser doesn\'t support geolocation.'; 
    } 

    var options = { 
    map: map, 
    position: new google.maps.LatLng(60, 105), 
    content: content 
    }; 

    var infowindow = new google.maps.InfoWindow(options); 
    map.setCenter(options.position); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

$('#show').click(function(){ 

    $overlay.show(); 

    if (resize){ 
    google.maps.event.trigger(map, 'resize'); 
    resize = false; 
    } 

}); 

$('.overlay-bg').click(function(){ 

    $overlay.hide(); 

}); 

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

    var pos  = $(this).data('pos'), 
     markers = $(this).data('markers'), 
     closest; 

    if(!pos || !markers){ 
    return; 
    } 

    $.each(markers,function(){ 
    var distance=google.maps.geometry.spherical 
        .computeDistanceBetween(this.getPosition(),pos); 
    if(!closest || closest.distance > distance){ 
     closest={marker:this, 
       distance:distance} 
    } 
    }); 
    if(closest){ 
    //closest.marker will be the nearest marker, do something with it 
    //here we simply trigger a click, which will open the InfoWindow 
    google.maps.event.trigger(closest.marker,'click') 
    } 
}); 


}); 

Answer 1

填充與這些標記的數組：

1. 讓createMarker函數返回該標記時，在該函數的末尾添加該：

   return marker; 
   

2. 商店數組（例如#findMe的數據屬性）

   function callback(results, status) { 
       var markers=[]; 
       if (status == google.maps.places.PlacesServiceStatus.OK) { 
       for (var i = 0; i < results.length; i++) { 
        markers.push(createMarker(results[i])); 
       } 
       } 
       $('#findMe').data('markers',markers); 
   } 
   

還存儲地理位置返回的位置（例如，也可作爲#findMe的數據）：

//add this after defining pos in the success-callback of geolocation 
    $('#findMe').data('pos',pos); 

要找到最近的標記，你可以使用方法幾何庫的computeDistanceBetween - 方法（不要忘了加載庫，它默認不加載）

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

    var pos  = $(this).data('pos'), 
     markers = $(this).data('markers'), 
     closest; 

    if(!pos || !markers){ 
    return; 
    } 

    $.each(markers,function(){ 
    var distance=google.maps.geometry.spherical 
        .computeDistanceBetween(this.getPosition(),pos); 
    if(!closest || closest.distance > distance){ 
     closest={marker:this, 
       distance:distance} 
    } 
    }); 
    if(closest){ 
    //closest.marker will be the nearest marker, do something with it 
    //here we simply trigger a click, which will open the InfoWindow 
    google.maps.event.trigger(closest.marker,'click') 
    } 
});