Leaflet中添加标注和popup,并且点击时弹窗显示详细页面

在Leaflet.js库中，添加标注（Markers）和点击事件弹出Popup是非常常见的交互功能。以下是步骤：

1. **添加标注**:
首先，你需要引入Leaflet库和创建一个新的地图实例。然后，你可以使用`L.marker()`函数来创建一个标记，指定地图中心点坐标和图标样式。例如：

   var map = L.map('map').setView([51.505, -0.09], 13); // 北纬51.505，西经-0.09, 地图缩放级别
   var markerIcon = L.icon({ // 自定义图标
       iconUrl: 'marker-icon.png',
       shadowUrl: 'marker-shadow.png',
       iconSize: [38, 95],
       iconAnchor: [22, 94],
       popupAnchor: [-3, -76]
   });
   var marker = L.marker([51.5, -0.09], {icon: markerIcon}).addTo(map);

2. **绑定Popup**:
使用`.bindPopup()`方法将一个HTML字符串、模板对象或DOM元素绑定到标记上。当鼠标悬停或点击时，该内容会显示：

   marker.bindPopup("<h3>这是一个标注</h3><p>这是详细的描述。</p>").openPopup();

如果需要动态数据，可以传递一个函数作为参数，这个函数会在每次打开弹窗时返回HTML内容。

3. **点击事件**:
可以通过监听`click`事件来获取更复杂的交互，比如跳转到详细页面。这通常涉及在`onPopupClose`或`onClick`事件中处理导航：

   marker.on('click', function(e) {
       window.location.href = "your_details_page.html"; // 跳转到详细页URL
   });