Пользователь открывает метку и вводит в поле input свои данные. Как сделать так, чтобы данные хранились в localstorage? То есть при перезагрузке сайта пользователь видел в этой форме свои введенные данные? https://yandex.ru/dev/maps/jsbox/2.1/object_manager/
это пример из песочницы API Яндекс Карт https://jsfiddle.net/wzbh12dr/
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map('map', {
center: [55.76, 37.64],
zoom: 10
}, {
searchControlProvider: 'yandex#search'
}),
objectManager = new ymaps.ObjectManager({
// Чтобы метки начали кластеризоваться, выставляем опцию.
clusterize: true,
// ObjectManager принимает те же опции, что и кластеризатор.
gridSize: 32,
clusterDisableClickZoom: true
});
// Чтобы задать опции одиночным объектам и кластерам,
// обратимся к дочерним коллекциям ObjectManager.
objectManager.objects.options.set('preset', 'islands#greenDotIcon');
objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
myMap.geoObjects.add(objectManager);
$.ajax({
url: "data.json"
}).done(function(data) {
objectManager.add(data);
});
}
data.json
{
"type": "FeatureCollection",
"features": [
{"type": "Feature", "id": 0, "geometry": {"type": "Point", "coordinates": [55.831903, 37.411961]}, "properties": {"balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em> <input></p><p><input type='submit' value='Отправить'></p>"}},
{"type": "Feature", "id": 1, "geometry": {"type": "Point", "coordinates": [55.763338, 37.565466]}, "properties": {"balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em> <input></p><p><input type='submit' value='Отправить'></p>"}},
{"type": "Feature", "id": 2, "geometry": {"type": "Point", "coordinates": [55.763338, 37.565466]}, "properties": {"balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em> <input></p><p><input type='submit' value='Отправить'></p>"}},
{"type": "Feature", "id": 3, "geometry": {"type": "Point", "coordinates": [55.744522, 37.616378]}, "properties": {"balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em> <input></p><p><input type='submit' value='Отправить'></p>"}},
{"type": "Feature", "id": 4, "geometry": {"type": "Point", "coordinates": [55.780898, 37.642889]}, "properties": {"balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em> <input></p><p><input type='submit' value='Отправить'></p>"}},
{"type": "Feature", "id": 5, "geometry": {"type": "Point", "coordinates": [55.793559, 37.435983]}, "properties": {"balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em> <input></p><p><input type='submit' value='Отправить'></p>"}},
{"type": "Feature", "id": 6, "geometry": {"type": "Point", "coordinates": [55.800584, 37.675638]}, "properties": {"balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em> <input></p><p><input type='submit' value='Отправить'></p>"}},
{"type": "Feature", "id": 7, "geometry": {"type": "Point", "coordinates": [55.716733, 37.589988]}, "properties": {"balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em> <input></p><p><input type='submit' value='Отправить'></p>"}},
{"type": "Feature", "id": 8, "geometry": {"type": "Point", "coordinates": [55.775724, 37.56084]}, "properties": {"balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em> <input></p><p><input type='submit' value='Отправить'></p>"}},
{"type": "Feature", "id": 9, "geometry": {"type": "Point", "coordinates": [55.822144, 37.433781]}, "properties": {"balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em> <input></p><p><input type='submit' value='Отправить'></p>"}},
{"type": "Feature", "id": 10, "geometry": {"type": "Point", "coordinates": [55.87417, 37.669838]}, "properties": {"balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em> <input></p><p><input type='submit' value='Отправить'></p>"}}
]
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Оптимальное добавление множества меток</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--
Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
-->
<script src="https://api-maps.yandex.ru/2.1/?lang=ru-RU&apikey=<ваш API-ключ>" type="text/javascript"></script>
<script src="https://yandex.st/jquery/2.2.3/jquery.min.js" type="text/javascript"></script>
<script src="object_manager.js" type="text/javascript"></script>
<style>
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
a {
color: #04b; /* Цвет ссылки */
text-decoration: none; /* Убираем подчеркивание у ссылок */
}
a:visited {
color: #04b; /* Цвет посещённой ссылки */
}
a:hover {
color: #f50000; /* Цвет ссылки при наведении на нее курсора мыши */
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>