阅读量:0
在Leaflet地图中，要实现自定义标记，你可以使用L.Marker类。以下是一个简单的示例，展示了如何在Leaflet地图上创建自定义标记：
- 首先，确保你已经在HTML文件中引入了Leaflet库：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Leaflet自定义标记示例</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <style> #map { height: 400px; } </style> </head> <body> <div id="map"></div> <script> // 在此处添加JavaScript代码 </script> </body> </html> - 接下来，在
<script>标签内添加以下JavaScript代码，以创建一个Leaflet地图实例，并在地图上添加自定义标记：
// 创建地图实例 const map = L.map("map").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); // 创建自定义标记 const customMarker = L.marker([51.5, -0.09], { icon: L.icon({ iconUrl: "path/to/your/custom-marker-icon.png", // 自定义标记图标的URL iconSize: [32, 32], // 标记图标的大小（宽度和高度） iconAnchor: [16, 32], // 标记图标锚点的位置（x和y坐标） popupAnchor: [0, -32] // 弹出框锚点的位置（x和y坐标） }), title: "自定义标记标题", // 标记的标题 popupContent: "这是自定义标记的弹出框内容。" // 弹出框的内容 }).addTo(map); 在这个示例中，我们创建了一个Leaflet地图实例，并添加了一个地图图层。然后，我们创建了一个自定义标记，设置了标记的图标、标题和弹出框内容，并将标记添加到地图上。
请确保将iconUrl属性的值替换为你自己的自定义标记图标的URL。
