Вход: с учетом конкретной координаты (широта и долгота) и радиус Выход: Отображение всех маркеров, которые находятся под этим кружком из заданного списка маркеров.
Как это сделать на картах Google?
Вход: с учетом конкретной координаты (широта и долгота) и радиус Выход: Отображение всех маркеров, которые находятся под этим кружком из заданного списка маркеров.
Как это сделать на картах Google?
Просто переберите все маркеры, которые у вас есть, и используйте следующую функцию, чтобы получить расстояние от конкретной координаты до маркера: computeDistanceBetween()
:
Чтобы вычислить это расстояние, вызовите computeDistanceBetween(), передав его два объекта LatLng.
Я нашел его здесь. Затем просто отфильтруйте все маркеры, которые оказываются достаточно близкими.
var targetLat=marker.getPosition().lat();
var targetLng=marker.getPosition().lng();
var targetLoc = new GLatLng(targetLat,targetLng);
var center= new GLatLng(centerLat, centerLng);
var distanceInkm=center.distanceFrom(targetLoc) / 1000;
if(distanceInkm < radius){
// To add the marker to the map, call setMap();
marker.setMap(map);
}
Загрузите геометрию геометрии и используйте computeDistanceBetween()
чтобы найти расстояние от каждого маркера от вашей центральной точки.
Если расстояние находится в радиусе, отобразите маркер.
Вот рабочий пример. Нажмите карту, чтобы нарисовать радиус с выбранным радиусом, и он отобразит все маркеры из массива all_locations
, которые попадают внутрь радиуса. Нажмите маркер, чтобы увидеть расстояние в метрах от центра радиуса. (Нажмите где-нибудь около Нью-Йоркской второй улицы, чтобы увидеть примерные маркеры - карта уже сосредоточена в этом месте)
var map = null;
var radius_circle = null;
var markers_on_map = [];
//all_locations is just a sample, you will probably load those from database
var all_locations = [
{type: "Restaurant", name: "Restaurant 1", lat: 40.723080, lng: -73.984340},
{type: "School", name: "School 1", lat: 40.724705, lng: -73.986611},
{type: "School", name: "School 2", lat: 40.724165, lng: -73.983883},
{type: "Restaurant", name: "Restaurant 2", lat: 40.721819, lng: -73.991358},
{type: "School", name: "School 3", lat: 40.732056, lng: -73.998683}
];
//initialize map on document ready
$(document).ready(function(){
var latlng = new google.maps.LatLng(40.723080, -73.984340); //you can use any location as center on map startup
var myOptions = {
zoom: 14,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', showCloseLocations);
});
function showCloseLocations(e) {
var i;
var radius_km = $('#radius_km').val();
var address = $('#address').val();
//remove all radii and markers from map before displaying new ones
if (radius_circle) {
radius_circle.setMap(null);
radius_circle = null;
}
for (i = 0; i < markers_on_map.length; i++) {
if (markers_on_map[i]) {
markers_on_map[i].setMap(null);
markers_on_map[i] = null;
}
}
var address_lat_lng = e.latLng;
radius_circle = new google.maps.Circle({
center: address_lat_lng,
radius: radius_km * 1000,
clickable: false,
map: map
});
if(radius_circle) map.fitBounds(radius_circle.getBounds());
for (var j = 0; j < all_locations.length; j++) {
(function (location) {
var marker_lat_lng = new google.maps.LatLng(location.lat, location.lng);
var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(address_lat_lng, marker_lat_lng); //distance in meters between your location and the marker
if (distance_from_location <= radius_km * 1000) {
var new_marker = new google.maps.Marker({
position: marker_lat_lng,
map: map,
title: location.name
});
google.maps.event.addListener(new_marker, 'click', function () {
alert(location.name + " is " + distance_from_location + " meters from my location");
});
markers_on_map.push(new_marker);
}
})(all_locations[j]);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false&libraries=geometry"});
</script>
<body style="margin:0px; padding:0px;" >
<select id="radius_km">
<option value=1>1km</option>
<option value=2>2km</option>
<option value=5>5km</option>
<option value=30>30km</option>
</select>
<div id="map_canvas" style="width:500px; height:300px;">
</body>
См. ответ на этот вопрос: Google Maps Api v3 - найти ближайшие маркеры
Вам в основном нужно прокрутить массив маркеров и использовать формулу для вычисления их расстояния от заданной точки (центр круга, представляющий ваш радиус поиска).
Затем вы можете исключить любые маркеры, которые находятся дальше, чем радиус, объявление будет оставлено со списком маркеров, которые находятся внутри круга.