Маркер листовки по клику
Можно ли в leafletjs создать маркер по нажатию на карту, я уже много разного перепробовал но ничего не вышло. Я имею в виду, например, создать событие щелчка, в котором создается маркер.
Это мой код, в этом примере я попытался создать функцию, которая создает маркер в определенной позиции, если вы щелкнете в любом месте, но моя цель — создать маркер в той позиции, где вы щелкаете. Я действительно новичок в этом языке и листовке, так что извините, если этот код глупый.
<!DOCTYPE html>
<html>
<head>
<!--<meta charset = "utf-8">
<meta name = "viewport" content = "initial-scale=1, maximum-scale=1,
user-scalable=no, width=device-width">
<title>Blank App</title>-->
<link rel = "stylesheet" href = "https://unpkg.com/[email protected]/dist/leaflet.css">
<script src = "https://unpkg.com/[email protected]/dist/leaflet.js"
integrity = "sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0
vlaXaVUearIOBhiXZ5V3ynxwA= = "
crossorigin = ""></script>
<style>
#mapid {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
</style>
</head>
<body>
<div id = "mapid"></div>
<script>
var mymap = L.map('mapid').setView([0, 0], 1);
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=UVvjZnbqOD4DfEYUrXxm', {
attribution:'<a href = "https://www.maptiler.com/copyright/" target = "_blank">© MapTiler</a> <a href = "https://www.openstreetmap.org/copyright" target = "_blank">© OpenStreetMap contributors</a>',
}).addTo(mymap);
function onMapClick(e) {
var marker = L.marker([50.5, 30.5]).addTo(map);
}
mymap.on('click', onMapClick);
</script>
</body>
</html>
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
1
1 067
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Используйте latlng из события, также используйте mymap:
function onMapClick(e) {
var marker = L.marker(e.latlng).addTo(mymap);
}
mymap.on('click', onMapClick);
Другие вопросы по теме
Увеличить слушателя реакции-листовки v3
Рисование границ на карте с помощью LeafletJS
Изменить центральное положение карты листовки React
Использование газона с листовкой
Удаление толстых синих граничных линий с выходной карты буклета / Предотвращение частичного исчезновения карты при появлении всплывающего окна
Анимированный маркер листовки не отображает широту и долготу
Листовка React - TileLayer не отображается при первой загрузке
Turf.js pointsWithinPolygon — создание полезного массива
Есть ли более простая (более короткая) запись для записи этого события/функции щелчка в Javascript?
Как выбрать область в листовке реакции
Похожие вопросы
В приложении Vue событие Key Up запускается для элемента ввода при переходе на вкладку. Почему?
Fullcalendar v5 - Проблемы с EventClick и Select
API событий Moodle
Подождите, данные триггера перехватывают только первое событие
Как я могу получить ответ прямо под каждым вопросом, который я сделал с двумя кнопками выбора «правильно» и «неправильно»?
Используйте обработчик событий, предоставленный библиотекой
Nodejs Аргумент «прослушиватель» должен иметь тип function
Воспроизведение нескольких фрагментов видео HTML5 одновременно
Как пройти через поле ввода на странице результатов поиска Google и автоматически сфокусироваться на нем?
Как управлять событием вставки в компоненте CKEdit 5 React?
Какой код вы пробовали? Пожалуйста, включите его в вопрос