leaflet api 实例
时间: 2023-05-04 16:03:14 浏览: 109
leaflet案例
3星 · 编辑精心推荐
Leaflet API 提供了强大而灵活的地图交互和可视化工具,使得用户可以自定义地图控件、图层、标记和图像等元素。这里介绍一个简单的 Leaflet API 实例。
在使用 Leaflet API 之前,需要先引入必要的 JavaScript 库等资源文件。这里以 CDN 链接为例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Leaflet API Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v1.7.1/leaflet.css" />
<script src="https://cdn.leafletjs.com/leaflet/v1.7.1/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
<script>
var map = L.map('map').setView([39.9, 116.4], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors'
}).addTo(map);
L.marker([39.9, 116.4]).addTo(map)
.bindPopup('Hello there!')
.openPopup();
</script>
</body>
</html>
```
以上代码为一个最简单的 Leaflet API 实例。首先创建一个地图容器 `<div id="map"></div>`,通过 L.map 方法创建一个 Leaflet 地图对象,并指定初始地图中心点坐标和缩放级别。接着使用 L.tileLayer 方法加载并添加地图瓦片图层,这里使用的是 OpenStreetMap 的免费瓦片图源。最后使用 L.marker 方法创建一个标记对象,并绑定一个弹出窗口,用于显示该标记的详细信息。当用户打开该地图时,会看到地图窗口中央有一个标记,点击标记即可弹出窗口,显示“Hello there!”的文本信息。
以上是一个简单的 Leaflet API 实例,用户可以根据需要自定义并配置更多可交互元素,以实现更多实用功能。
阅读全文