button - 带有外部按钮的传单
问题描述
我的传单卡片适用于以下代码。如果单击标记,还会打开带有地址的弹出窗口。现在我想在外部为每个创建标记的站点创建一个按钮,同时在地图上显示带有地址的弹出窗口。数据可以通过按钮传递。它是这样工作的吗,顺便说一句。有谁知道如何更改代码以及如何在按钮中编写函数(?)?
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Map</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha402-xodZBNTC5n17Xt2aocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19sSR7A=="
crossorigin=""/>
</head>
<body>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha402-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrUearIOnxwA=="
crossorigin=""></script>
<div id="map" style="width: 100%; height: 540px"></div>
<script>
var planes = [
["<b>Aral tkst</b><br>Fribert-Str. 14",40.6027069,7.185095],
["<b>Esso tkst</b><br>Alee 63",40.603758,7.16498],
["<b>Shell tkst</b><br>Hener Str. 100",40.609695,7.181562],
["<b>Jet tkst</b><br>Kullee 5",40.6057,2.90240],
["<b>Total tkst</b><br>Caper Str. 123",40.604639,2.914727],
["<b>Shell tkst</b><br>Blistr. 97",40.593768,2.920507],
["<b>Bavaria tkst</b><br>Bumer Str. 1",40.5827866,2.913093],
["<b>Markant tkst</b><br>Her Str. 249",40.58409,2.91258],
];
var map = L.map('map').setView([40.58903, 7.17594], 13)
var circle = L.circle([40.58903, 7.17594], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 150
}).addTo(map);
circle.bindPopup("<b>Eigene Adresse:</b><br>Weg 1");
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' bvchim',
maxZoom: 18,
}).addTo(map);
for (var i = 0; i < planes.length; i++) {
marker = new L.marker([planes[i][1],planes[i][2]])
.bindPopup(planes[i][0])
.addTo(map);
}
</script>
</body>
</html>
解决方案
您可以使用以下代码:
var container = document.getElementById('button-container');
for (var i = 0; i < planes.length; i++) {
var marker = new L.marker([planes[i][1],planes[i][2]])
.bindPopup(planes[i][0])
.addTo(map);
var btn = document.createElement('button');
btn.id = L.stamp(marker); // set the id of the marker as button id
btn.innerHTML = planes[i][0];
L.DomEvent.on(btn,'click',(e)=>{
var target = e.target;
if(target.nodeName !== "BUTTON"){ // Needed because the target can also be the <b> Element
target = target.parentNode;
}
var btn2 = target
var marker2 = map._layers[btn2.id]; // get marker over id
var latlng = marker2.getLatLng();
map.panTo(latlng);
marker2.openPopup();
})
container.appendChild(btn);
}
推荐阅读
- reactjs - react-native-picker-select 不使用父视图 {flexDirection:'row'}
- android - 如何使用 kotlin 获得双卡信号强度
- reactjs - 用笑话进行单元测试时如何模拟普通对象的依赖关系?
- php - 使用 Laravel Eloquent 返回多个关系
- html - firefox 热门网站 主页 图标 标题
- c# - 调试资源字符串通常不可用 键和参数 silverlight
- php - Php Codesniffer 应该忽略大写字母和句号
- java - 使用 Hibernate 不会触发 MySQL 的“ON UPDATE CURRENT_TIMESTAMP”
- android - 这个鳕鱼显示所有数组列表我想在数组列表中显示第一行,然后单击按钮显示第二行
- svg.js - 在svgjs中的每个元素属性上使用不同的动画属性对单个元素的多个属性进行动画处理