Добавление обработчика во всплывающую листовку

Question

Предположим, у нас есть проект, использующий leaflet.js. При нажатии на карту я хочу, чтобы появилось всплывающее окно, которое дает мне выпадающее меню с кнопкой отправки. Выпадающая функция имеет 3 варианта a, b, c. Я хочу иметь возможность создать кнопку отправки, которая создает маркер в месте (LatLong) всплывающего окна. этот маркер должен отображать строку выбора, сделанную в выпадающем меню.

Прежде всего, я попробовал вариант 1 в коде, однако я получаю ошибку ссылки всякий раз, когда я создаю обработчик. Я также попробовал вариант 2, где каждый создает объект div. Я также попытался создать объект div вручную с идентификатором «popupcontent», который сработал, однако обработчик не запоминает координаты lat-long.

В итоге:

Я хочу создать кнопку, которая делает маркер в месте, где щелкают содержимое a, b, c, в зависимости от выбора в раскрывающемся меню.

вариант 1

var dropdown =
    `Type to submit:
    <select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value = "c">c</option>
    </select>: <button onclick="buttonFunction()">submit</button>`

  var popup = L.popup();
  function onMapClick(e) {
    popup
    .setLatLng(e.latlng)
    .setContent(dropdown)
    .openOn(mymap);
    //L.marker(e.latlng).addTo(mymap);
    //L.marker([e.latlng.lat, e.latlng.long]).addTo(mymap)
  }

option2

var popup = L.popup();
  var container = L.DomUtil.create('div');
  var btn = L.DomUtil.create('button', '', container);
  btn.setAttribute('type', 'button');
  btn.innerHTML = 'hello kees';
  L.DomEvent.on(btn, 'click', () => {
    alert("hello kees");
  });
  function onMapClick(e) {
    popup
    .setLatLng(e.latlng)
    .setContent(container)
    .openOn(mymap);
    //L.marker(e.latlng).addTo(mymap);
    //L.marker([e.latlng.lat, e.latlng.long]).addTo(mymap)
  }

ЗАДАЧА:

function onMapClick(e) {
    popup
    .setLatLng(e.latlng)
    .setContent( "LatLong: "+ e.latlng.lat + "," + e.latlng.lng)
    .openOn(mymap);
    lat = e.latlng.lat
    long = e.latlng.lng
  }

function buttonFunction() {
  var selected = document.getElementById("popupContent");
  var value = dropDown.options[dropDown.selectedIndex].text;
  L.marker(lat,long).addTo(mymap);
}

Answer 1

Сначала создайте свой const, который будет содержать html, и присвойте id элементу select, чтобы иметь возможность получить значение позже.

Во-вторых, создайте карту onclick Функция получите latLng и создайте на лету popup.

Третий шаг, получить значение из выпадающего списка и динамически создать маркер, назначив его значением всплывающего выбора.

Откройте пример на полной странице, чтобы воспроизвести его.

#map {
  height: 100vh;
}

body {
  margin: 0px;
  padding: 0px;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

<div id="map">
</div>

<script>
  let latLng;
  const map = L.map('map').setView([51.505, -0.09], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  const dropdown =
    `Type to submit:
    <select id="ddlViewBy">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value = "c">c</option>
    </select>: <button onclick="buttonFunction()">submit</button>`;

  map.on('click', e => {
    const popup = L.popup()
      .setLatLng(e.latlng)
      .setContent(dropdown)
      .openOn(map);
    latLng = e.latlng;
  })

  buttonFunction = () => {
    const dropdonwValue = document.getElementById("ddlViewBy").value;
    map.closePopup()
    L.marker(latLng)
      .bindPopup(dropdonwValue)
      .addTo(map)
  }

</script>