Радиус
Поиск в радиусе позволяет находить организации в указанном радиусе на карте. Для этого выполните следующие действия.
- Выберите инструмент Радиус в левом верхнем углу карты.
- Щелкните мышкой на карте и задайте необходимый радиус, в котором будет производиться поиск организаций. В появившемся диалоговом окне Радиус отображается величина выбранного радиуса на карте и приблизительное время, за которое можно преодолеть расстояние от центра до края выделенной области пешком.
- Щелкните по ссылке Найти организации в заданном радиусе. В результате поиска на карте и в справочнике отобразятся организации, находящиеся в заданном радиусе.
Квадратные голубые маркеры на окружности предназначены для изменения размера радиуса, а круглый голубой маркер в центре окружности — для изменения расположения радиуса на карте.
Поиск в Радиусе также можно совмещать с поиском в полях «Что» и «Где». К примеру, можно найти все кафе на улице Каменская недалеко от вашего дома, указав радиусом нужную область на карте.
Величину радиуса и его расположение на карте можно изменять также в том случае, когда инструмент Радиус отключен (то есть окно Радиус закрыто).
Другие страницы раздела:
- Управление слоями
- 3D
- Масштабная линейка
- Вращение карты
- Линейка
Как выполнить поиск организации в заданном радиусе
Поиск в радиусе, позволяет находить организации в указанном радиусе. Для этого выполните следующие действия:
1. Выберите инструмент «Поиск в радиусе».
2. Выберите место на карте и кликните один раз левой кнопкой мыши — так вы установите центр. Отпустив клавишу, отодвиньте курсор от центра, задайте необходимый радиус и кликните еще раз.
Для того чтобы «передвинуть» выделение, кликните на его центре левой кнопкой мыши и, не отпуская кнопку, переместите в нужное место.
3. Если Вы еще не вводили запрос в строку поиска, сделаете это сейчас или нажмите на ссылку «Найти все организации». В результате все организации или те, которые удовлетворяют запросу, находящиеся в заданном радиусе, отобразятся на карте и в списке найденных.
4. Полностью выключить радиус можно нажав кнопку «Закрыть».
При создании справочных ресурсов с использованием карт часто возникает проблема, как показать ближайшие объекты для того или иного пользователя.
В этой заметке я расскажу как это сделать, с использованием API Google Maps v3.
Для примера мы будем искать ближайшие кафе в Нижнем Новгорде.
Пользователь вводит свой адрес в форму над картой и радиус поиска в километрах, ему выдается найденный результат на карте, а слева от карты список кафе отсортированный по растоянию.
Посмотреть пример в действии.
В начале необходимо подготовить исходные данные о кафе.
Они взяты из открытых источников в интернете.
Затем, с помощью скрипта из заметки «Используем HTML-геокодер для Google Maps JavaScript API v3», были получены значения координат для собранных адресов и записаны в базу данных.
Как работает данный пример.
Введенное пользователем значение адреса, мы используя геокодер API Google Maps v3 преобразуем в пару координат — значения широрты и долготы, которые затем в месте с радиусом передаем скрипту phpsqlsearch_genjson.php.
В данном скрипте производится специальный запрос к таблице в базе данных, в результате мы получаем сведения об организациях попадающих в окружность заданного радиуса и с определенным центром.
Данные сортируются по расстоянию от центра окружности.
Вот код запроса:
$query = sprintf("SELECT address, name, rayon, lat, lng, ( 6371 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM markers_ussearch HAVING distance < '%s' ORDER BY distance LIMIT 0 , 50",
mysql_real_escape_string($lat),
mysql_real_escape_string($lng),
mysql_real_escape_string($lat),
mysql_real_escape_string($radius));
Из массива полученных данных формируется ответ в формате JSON, который отправляется на страницу с картой.
Полный код файла phpsqlsearch_genjson.php:
<?php
header("Content-type: text/html;charset=UTF-8");
require("config.php");
$lat = $_GET["lat"];
$lng = $_GET["lng"];
$radius = $_GET["radius"];
$query = sprintf("SELECT address, name, rayon, lat, lng, ( 6371 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM markers_ussearch HAVING distance < '%s' ORDER BY distance LIMIT 0 , 50",
mysql_real_escape_string($lat),
mysql_real_escape_string($lng),
mysql_real_escape_string($lat),
mysql_real_escape_string($radius));
$result = mysql_query($query);
if (!$result) {
die("Invalid query: " . mysql_error());
}
while ($par1 = mysql_fetch_array($result)){
$places[] = array("name"=>$par1['name'],
"address" => $par1['address'],
"rayon" => $par1['rayon'],
"lat" => $par1['lat'],
"lng" => $par1['lng']);
}
$json = json_encode($places);
echo $json;
?>
Файл config.php служит для соединения с базой данных и имеет следующий код:
<?php
$sdb_name = "localhost";
$user_name = "root";
$user_password = "";
$db_name = "gmap_bd";
// соединение с сервером базы данных
if(!$link = mysql_connect($sdb_name, $user_name, $user_password))
{
echo "<br>Не могу соединиться с сервером базы данных<br>";
exit();
}
// выбираем базу данных
if(!mysql_select_db($db_name, $link))
{
echo "<br>Не могу выбрать базу данных<br>";
exit();
}
mysql_query('SET NAMES utf8');
?>
Давайте теперь рассмотрим код основного файла usersearch_gmapv3_radius.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Поиск по своим данным от произвольной точки в пределах окружности заданного радиуса, с выводом на Google Maps</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var map, infoWindow, userMarker = [], side_bar_html = "";
var gmarkers = new Array();
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
gmarkers.push(marker);
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '</a><br>';
}
function initialize() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(56.317213,43.993976),
zoom: 12,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
}
function searchLocations() {
var address = $('#addressLoc').val();
var radius = $('#radiusSelect').val();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var locations_lat = results[0].geometry.location.lat();
var locations_lng = results[0].geometry.location.lng();
while(userMarker[0]){
userMarker.pop().setMap(null);
}
var myLatLng = new google.maps.LatLng(locations_lat, locations_lng);
userMarker[0] = new google.maps.Marker({
position: myLatLng,
map: map,
icon: 'home-1.png'
});
var bounds = new google.maps.LatLngBounds();
clearOverlay();
var sidebar = $("#sidebar").html();
$("#sidebar").html(sidebar);
//Загружаем данные в формате JSON из файла phpsqlsearch_genjson.php
$.getJSON("phpsqlsearch_genjson.php", {lat : locations_lat, lng : locations_lng, radius:radius }, function(json){
var marker;
if (json.length == null) {
$("#sidebar").html('Ничего не найдено.');
return;
}
for (i = 0; i < json.length; i++) {
var name = json[i].name;
var address = '<strong>'+name+'</strong><br>'+json[i].address+'<br >Район: '+json[i].rayon;
var point = new google.maps.LatLng(json[i].lat, json[i].lng);
marker = createMarker(point, name, address);
bounds.extend(point);
}
map.fitBounds(bounds);
$("#sidebar").append(side_bar_html);
});
} else {
alert(address + ' not found');
}
});
}
function myclick(i) {
var latLng = gmarkers[i].getPosition();
map.setCenter(latLng);
map.setZoom(17);
google.maps.event.trigger(gmarkers[i], "click");
}
function clearOverlay() {
infoWindow.close();
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(null);
}
gmarkers.length = 0;
side_bar_html = "";
$("#sidebar").html("");
}
</script>
<style type="text/css">
html, body { height: 100%; }
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
</style>
</head>
<body onload="initialize()">
<p>Ваш адрес: <input type="text" id="addressLoc" size="40" value="Нижний Новгород, "/>
Радиус поиска в км: <input type="text" id="radiusSelect" size="5"/>
<input type="button" onclick="searchLocations()" value="Найти"/>
</p>
<div id="mymap_div" style="width:1050px;">
<div id="sidebar" style="float:left; width: 250px; height: 600px; overflow: auto;"></div>
<div id="map" style="margin-left: 250px; width: 800px; height:600px;"></div>
</div>
</body>
</html>
В начале мы после подключения API Google Maps, добавляем к нашему html-файлу javascript-библиотеку Jquery, для выполнения асинхронных запросов.
По клику на кнопке «Найти», вызывается функция searchLocations, в которой мы получаем введенные данные из формы, производим геокодирование адреса и отправляем запрос скрипту phpsqlsearch_genjson.php, а затем принимаем полученный ответ в формате JSON.
Функция createMarker — добавляет метку на карту и ссылку в слайдбар.
Функция myclick обрабатывает клик по ссылке в слайдбаре, происходит центрирование и масштабирование карты на нужной метке.
Функция clearOverlay — служит для удаления предыдущего результата поиска.
Скачать архив с файлами примера
Для написания заметки использовались примеры из следующих статей «Реализация поиска по данным пользователя с использованием API Google Maps v3» на моем блоге и «Creating a Store Locator with PHP, MySQL & Google Maps».
Калькулятор радиуса карты
Примечание: С помощью этого инструмента вы можете узнать радиус круга в любом месте на Картах Google, просто щелкнув мышью в одной точке и увеличив или переместив круг, чтобы изменить радиус на Карте.
Нажмите кнопку Нарисуйте круг, затем нажмите на карту, чтобы поместить центр круга, и одновременно перетащите, чтобы начать создание круга. Вы также можете создать круг фиксированного размера.
Да оно и не обязательно внутри drag проверять.
Добавили круг на карту и сразу же проверяем вхождение в него и не входящие красим в другой цвет или удаляем.
circle = new ymaps.Circle([[55.43, 37.7], 50000], null, { draggable: true });
myMap.geoObjects.add(circle);
var objectsInsideCircle = objects.searchInside(circle);
objectsInsideCircle.setOptions('preset', 'islands#redIcon');
// Оставшиеся объекты - синими.
objects.remove(objectsInsideCircle).setOptions('preset', 'islands#blueIcon');