时间戳

首页 > 解决方案 > 向弹出传单添加处理程序

javascript - 向弹出传单添加处理程序

问题描述

假设我们有一个使用 Leaflet.js 的项目。单击地图时，我希望出现一个弹出窗口，它给我一个带有提交按钮的下拉菜单。下拉功能有 3 个选项 a、b、c。我希望能够创建一个提交按钮，该按钮在弹出窗口的位置（LatLong）创建一个标记。此标记必须显示下拉菜单中所做选择的字符串。

首先，我在代码中尝试了选项 1，但是每当我创建处理程序时都会出现引用错误。我还尝试了创建 div 对象的选项 2。我尝试使用 ID“popupcontent”手动创建 div 对象，但处理程序不记得经纬度坐标。

总之：

我想创建一个按钮，根据下拉菜单中的选择，在单击的位置使用 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)
  }

选项2

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);
}

标签： javascriptleaflet

解决方案

首先，创建将保存 html 的 const 并将 an 分配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>

推荐阅读