代码之家 › 专栏 › 技术社区 › Mauro

如何将下拉列表添加到传单标记?

leaflet

0

Mauro · 技术社区 · 7 年前

我正在制作一张单张地图,上面有一些标记和路线。当一个标记被点击时,我需要显示一些选项,比如“删除”,“在这里停留15分钟”等等。

Marker.popup() . 我想我可以重新设计弹出窗口的样式,使其看起来像我想要的那样,但是使用我的自定义HTML会更容易,因为我只想在单击标记后看到下拉列表。

1 回复 | 直到 6 年前

1

kboul 7 年前

var map = L.map('mapid').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);

var popupContent = `
	<select>
    <option value="delete">delete</option>
    <option value="stop here for 15 minutes">stop here for 15 minutes</option>
  </select>
`;

L.marker([51.5, -0.09]).addTo(map)
  .bindPopup(popupContent);

#mapid {
  height: 500px;
}

<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css">

<script src='https://unpkg.com/leaflet@1.3.3/dist/leaflet.js
'></script>
<div id="mapid"></div>