我正在制作一张传单地图,其中包含一些标记和路线。单击标记后,我需要显示一些选项,例如“删除”,“在此处停留15分钟”等。
我现在要添加到Leaflet的所有操作都是通过Marker.popup()
。我想我可以重新设置弹出窗口的样式,使其看起来像我想要的样式,但是使用我的自定义HTML会更容易,因为我只想看到单击标记后的下拉列表即可。
答案 0 :(得分:1)
只需在bindPopup方法内添加带有html的select标记
var map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <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>