351 lines
9.8 KiB
PHP
351 lines
9.8 KiB
PHP
<div id="map" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;"></div>
|
||
|
||
{{-- Верхняя панель поиска --}}
|
||
<div id="search-bar"
|
||
class="container-fluid py-3"
|
||
style="position:fixed;top:0;left:0;right:0;z-index:100;">
|
||
<div class="row">
|
||
<div class="col-md-6 mx-auto position-relative">
|
||
|
||
{{-- Поле ввода --}}
|
||
<input type="text"
|
||
id="address-input"
|
||
class="form-control form-control-lg shadow-lg"
|
||
style="border-radius:50px;font-size:28px;padding:20px 60px 20px 28px;"
|
||
placeholder="Введите адрес (дом, улица)…"
|
||
autocomplete="off">
|
||
|
||
{{-- Кнопка очистки --}}
|
||
<div id="clear-input-btn"
|
||
style="
|
||
position:absolute;
|
||
right:28px;
|
||
top:50%;
|
||
transform:translateY(-50%);
|
||
font-size:38px;
|
||
line-height:32px;
|
||
cursor:pointer;
|
||
display:none;
|
||
color:#666;
|
||
z-index:300;
|
||
">
|
||
×
|
||
</div>
|
||
|
||
{{-- Подсказки --}}
|
||
<div id="suggest-box"
|
||
class="list-group shadow position-absolute w-100"
|
||
style="z-index:200; display:none; max-height:300px; overflow-y:auto;
|
||
top:70px;border-radius:16px;">
|
||
</div>
|
||
|
||
{{-- Статус ожидания --}}
|
||
<div id="typing-status"
|
||
class="mt-2 text-center text-light"
|
||
style="display:none;text-shadow:0 0 3px black;">
|
||
Поиск ближайших адресов…
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
{{-- Модальное окно результата --}}
|
||
<div id="result-modal"
|
||
class="modal fade"
|
||
tabindex="-1"
|
||
role="dialog">
|
||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||
<div class="modal-content shadow-lg" style="border-radius:20px;">
|
||
<div class="modal-body" id="modal-content-area" style="font-size:20px;"></div>
|
||
<div class="modal-footer text-center">
|
||
<button class="btn btn-primary btn-lg px-5" data-dismiss="modal">
|
||
Закрыть
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey={{ $apikey }}"></script>
|
||
|
||
<script>
|
||
/* -----------------------------------------------------------
|
||
КОНСТАНТЫ
|
||
----------------------------------------------------------- */
|
||
const SUGGEST_KEY = "{{ $suggest_apikey }}";
|
||
const API_SUGGEST = "https://suggest-maps.yandex.ru/v1/suggest";
|
||
const SEARCH_CENTER = [59.859605, 30.340733];
|
||
const API_URL = "?cat={{$cat->cat}}&act=getInfo";
|
||
const SUGGEST_DELAY = 500;
|
||
const BBOX = "30.25163,59.81455~30.42983,59.90465";
|
||
|
||
let map, marker;
|
||
let typingTimer = null;
|
||
let lastTypedText = "";
|
||
let polygons = {}; // хранилище
|
||
|
||
/* -----------------------------------------------------------
|
||
КАРТА
|
||
----------------------------------------------------------- */
|
||
ymaps.ready(function () {
|
||
map = new ymaps.Map('map', {
|
||
center: SEARCH_CENTER,
|
||
zoom: 13,
|
||
controls: ['zoomControl'],
|
||
behaviors: ['drag', 'scrollZoom']
|
||
});
|
||
|
||
|
||
// Рендер существующих участков
|
||
@if (!empty($rows))
|
||
@foreach($rows as $row)
|
||
addPolygon(
|
||
{!! $row['coords'] !!},
|
||
{{ (int)$row['id'] }},
|
||
'{{ $row['color'] }}' // hex
|
||
);
|
||
@endforeach
|
||
@endif
|
||
});
|
||
|
||
|
||
function addPolygon(coords, id, color) {
|
||
if (!coords || !coords.length) return;
|
||
|
||
var polygon = new ymaps.Polygon(
|
||
coords,
|
||
{ polygon_id: id }, // ← сохраняем id внутри объекта
|
||
{
|
||
fillColor: color || '#00AAFF55',
|
||
strokeColor: '#0000FF',
|
||
strokeWidth: 2,
|
||
opacity: 0.6
|
||
}
|
||
);
|
||
|
||
// КЛИК ПО ПОЛИГОНУ
|
||
polygon.events.add('click', function (e) {
|
||
var pid = polygon.properties.get('polygon_id');
|
||
openPolygonInfo(pid);
|
||
});
|
||
|
||
map.geoObjects.add(polygon);
|
||
|
||
polygons[id] = polygon;
|
||
}
|
||
|
||
/* -----------------------------------------------------------
|
||
ЭЛЕМЕНТЫ
|
||
----------------------------------------------------------- */
|
||
var $input = $("#address-input");
|
||
var $suggest = $("#suggest-box");
|
||
var $typingStatus = $("#typing-status");
|
||
var $clearBtn = $("#clear-input-btn");
|
||
|
||
/* -----------------------------------------------------------
|
||
ФОКУС → ОЧИСТКА ПОЛЯ
|
||
----------------------------------------------------------- */
|
||
$input.on("focus", function () {
|
||
if ($(this).val().length > 0) {
|
||
$(this).val("");
|
||
$suggest.hide();
|
||
$typingStatus.hide();
|
||
$clearBtn.hide();
|
||
}
|
||
});
|
||
|
||
/* -----------------------------------------------------------
|
||
ПОКАЗ/СКРЫТИЕ КРЕСТИКА
|
||
----------------------------------------------------------- */
|
||
$input.on("input", function () {
|
||
if ($(this).val().length > 0) {
|
||
$clearBtn.show();
|
||
} else {
|
||
$clearBtn.hide();
|
||
$suggest.hide();
|
||
$typingStatus.hide();
|
||
}
|
||
});
|
||
|
||
/* Клик по крестику */
|
||
$clearBtn.on("click", function () {
|
||
$input.val("");
|
||
$input.focus();
|
||
$suggest.hide();
|
||
$typingStatus.hide();
|
||
$clearBtn.hide();
|
||
});
|
||
|
||
|
||
/* -----------------------------------------------------------
|
||
ОБРАБОТКА ВВОДА + ЗАДЕРЖКА ПЕРЕД ЗАПРОСОМ
|
||
----------------------------------------------------------- */
|
||
$input.on("input", function () {
|
||
var text = $(this).val().trim();
|
||
|
||
if (text.length < 4) {
|
||
$suggest.hide();
|
||
$typingStatus.hide();
|
||
return;
|
||
}
|
||
|
||
$typingStatus.show();
|
||
$suggest.hide();
|
||
lastTypedText = text;
|
||
|
||
clearTimeout(typingTimer);
|
||
typingTimer = setTimeout(function () {
|
||
loadSuggest(lastTypedText);
|
||
}, SUGGEST_DELAY);
|
||
});
|
||
|
||
/* -----------------------------------------------------------
|
||
ЗАГРУЗКА ПОДСКАЗОК
|
||
----------------------------------------------------------- */
|
||
function loadSuggest(query) {
|
||
$.getJSON(API_SUGGEST, {
|
||
"apikey": SUGGEST_KEY,
|
||
"text": query,
|
||
"lang": "ru_RU",
|
||
"types": "house",
|
||
"bbox": BBOX,
|
||
"ll": SEARCH_CENTER[1] + "," + SEARCH_CENTER[0],
|
||
"strict_bounds": 1
|
||
}, function (data) {
|
||
$typingStatus.hide();
|
||
renderSuggest(data.results || []);
|
||
|
||
}).fail(function(){
|
||
$typingStatus.hide();
|
||
renderSuggestError("Сервис подсказок недоступен");
|
||
});
|
||
}
|
||
|
||
/* -----------------------------------------------------------
|
||
СПИСОК ПОДСКАЗОК
|
||
----------------------------------------------------------- */
|
||
function renderSuggest(list) {
|
||
$suggest.empty();
|
||
|
||
if (!list.length) {
|
||
$suggest.html(
|
||
'<div class="list-group-item py-3 text-muted text-center">Адресов не найдено</div>'
|
||
).show();
|
||
return;
|
||
}
|
||
|
||
list.forEach(function (item) {
|
||
var title = item.title && item.title.text ? item.title.text : "";
|
||
var subtitle = item.subtitle && item.subtitle.text ? item.subtitle.text : "";
|
||
var full = title + (subtitle ? ", " + subtitle : "");
|
||
|
||
var html =
|
||
'<a href="#" class="list-group-item list-group-item-action py-3" data-address="' + full + '">' +
|
||
'<div class="font-weight-bold">' + title + '</div>' +
|
||
'<div class="small text-muted">' + subtitle + '</div>' +
|
||
'</a>';
|
||
|
||
$suggest.append(html);
|
||
});
|
||
|
||
$suggest.show();
|
||
}
|
||
|
||
function renderSuggestError(msg) {
|
||
$suggest.empty().html(
|
||
'<div class="list-group-item py-3 text-danger text-center">' + msg + '</div>'
|
||
).show();
|
||
}
|
||
|
||
/* -----------------------------------------------------------
|
||
ВЫБОР ПОДСКАЗКИ → ГЕОКОДЕР
|
||
----------------------------------------------------------- */
|
||
$(document).on("click", "#suggest-box a", function (e) {
|
||
e.preventDefault();
|
||
|
||
var addr = $(this).attr("data-address");
|
||
$input.val(addr);
|
||
$suggest.hide();
|
||
|
||
ymaps.geocode(addr, { results: 1 }).then(function (res) {
|
||
var obj = res.geoObjects.get(0);
|
||
if (!obj) {
|
||
showModal("<div class='text-danger'>Не удалось определить координаты</div>");
|
||
return;
|
||
}
|
||
|
||
var coords = obj.geometry.getCoordinates();
|
||
placeMarker(coords, addr);
|
||
sendToServer(coords);
|
||
|
||
}).catch(function(){
|
||
showModal("<div class='text-danger'>Ошибка геокодирования</div>");
|
||
});
|
||
});
|
||
|
||
/* -----------------------------------------------------------
|
||
МАРКЕР
|
||
----------------------------------------------------------- */
|
||
function placeMarker(coords, caption) {
|
||
if (marker) map.geoObjects.remove(marker);
|
||
|
||
marker = new ymaps.Placemark(coords, {
|
||
iconCaption: caption
|
||
}, { preset: 'islands#redIcon' });
|
||
|
||
map.geoObjects.add(marker);
|
||
map.panTo(coords, { flying:true });
|
||
}
|
||
|
||
/* -----------------------------------------------------------
|
||
ОТПРАВКА НА СЕРВЕР
|
||
----------------------------------------------------------- */
|
||
function sendToServer(coords) {
|
||
$.post(API_URL, { coords: coords }, function (html) {
|
||
showModal(html);
|
||
}).fail(function(){
|
||
showModal("<p class='text-danger'>Нет связи с сервером</p>");
|
||
});
|
||
}
|
||
|
||
/* -----------------------------------------------------------
|
||
ОТКРЫТИЕ ИНФО ПО ПОЛИГОНУ
|
||
----------------------------------------------------------- */
|
||
function openPolygonInfo(id) {
|
||
$.post(API_URL, { polygon_id: id }, function (html) {
|
||
showModal(html);
|
||
}).fail(function () {
|
||
showModal("<p class='text-danger'>Нет связи с сервером</p>");
|
||
});
|
||
}
|
||
|
||
/* -----------------------------------------------------------
|
||
МОДАЛКА
|
||
----------------------------------------------------------- */
|
||
function showModal(content) {
|
||
$("#modal-content-area").html(content);
|
||
$("#result-modal").modal("show");
|
||
}
|
||
</script>
|
||
|
||
|
||
<style>
|
||
#address-input {
|
||
height: 60px !important;
|
||
font-size: 28px;
|
||
border-radius: 40px;
|
||
}
|
||
|
||
#suggest-box a {
|
||
font-size: 22px;
|
||
border-left: 0; border-right:0;
|
||
}
|
||
|
||
.modal-content {
|
||
font-size: 20px;
|
||
}
|
||
</style>
|