Добрый день, уважаемые форумчане!
Что есть сейчас?
На странице есть блок карты (для создания и работы с ним использую leaflet.js + Leaflet Routing Machine для построения маршрутов)
Блок карты:
<div id="map" style="width: 100%; height: 500px"></div>
Маршрут отрисовывается при помощи Leaflet Routing Machine так:
L.Routing.control({waypoints: markers}).addTo(map);
, где markers - массив, содержащий координаты маркеров для построения маршрута
Чего я хочу?
В идеале все должно работать так:
1. В поле формы вводятся координаты маркера
2. По кнопке submit формы координаты записываются в массив markers
3. По маркерам отрисовывается маршрут
Что я сделал для того, чтобы достичь своего идеала?)
1. Сотворил это:
<script>
//Объявляем массив markers для хранения точек маршрута
var markers = [];
//Отрисовка маршрута по точкам
L.Routing.control({
waypoints: markers
}).addTo(map);
//Функция для добавления нового элемента в массив markers
function LRMAdd(coord){
markers.push(L.latLng(coord));
$('#map').html();
}
function getValue(coord){
return document.getElementById(coord).value;
}
</script>
2. Форма для добавления точки маршрута:
<form id="form">
<input type="text" id="input_coord">
<input type="submit" onsubmit="LRMAdd(getValue("input_coord"))" value="Добавить"></form>
И ничего! Подозреваю, что проблема в том, что при нажатии кнопки "Добавить" обновляется страница целиком, и markers обнуляется каждый раз. Предполагаю, что проблему можно решить, сделав возможность обновления отдельного блока с картой без перезагрузки всей страницы. Однако я не понимаю, как это сделать. Помогите, пожалуйста!