Question

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

首先，我尝试了代码中的选项1，但是每当我创建处理程序时，我都会得到一个参考错误。我还尝试了选项2，其中一个创建了div对象。我还尝试使用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)
  }

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

首先，创建将保存html的const并将<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkkzv-gkVsQSAUDOjUdEBmXVqmaDphVjc&libraries=places&callback=initMap"></script> <input id="SeachLOcationToBuy" class="map-form-control form-control" type="text" name="setMyNewAddress" placeholder="Enter your address" onFocus="geolocate()" value=""/> <div class="PageBodyContainerMap"> <span class="container"> <span class="GeoMap"> <div id="map"></div> <div id="infowindow-content"> <span id="place-name" class="title"></span><br> Place ID <span id="place-id"></span><br> <span id="place-address"></span> </div> </span> </span> </div>分配给id元素，以便以后可以获取值。

第二，创建地图select函数，获取onclick并动态创建latLng。

第三步，从下拉列表中获取值，然后将其分配为弹出式选择的值来动态创建标记。

以整页打开示例以重现它。

popup

#map {
  height: 100vh;
}

body {
  margin: 0px;
  padding: 0px;
}

在弹出式传单中添加处理程序

1 个答案: