webgis添加多个点标记代码
时间: 2023-10-15 07:05:48 浏览: 100
C#最短路径
5星 · 资源好评率100%
以下是使用 Leaflet.js 添加多个点标记的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>WebGIS 添加多个点标记</title>
<!-- 引入 Leaflet 库的 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css" integrity="sha384-9DEfUv4wJ9jNj7/S60y3X9V3bRjZIhXf6l2Vv/oF5k51x4zvC4JQFnqQ4E5hWw4K" crossorigin=""/>
<!-- 引入 Leaflet 库的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js" integrity="sha384-4i3YpB9lfnAvTmfn3m9H6kxUuU9hOx5T5M5X1jTx3zZ5qJ6Q5B8rA5Q9mEqpTTLd" crossorigin=""></script>
<!-- 设置地图容器的 CSS 样式 -->
<style>
#mapid { height: 500px; }
</style>
</head>
<body>
<!-- 创建地图容器 -->
<div id="mapid"></div>
<!-- 在页面底部引入 JavaScript 代码 -->
<script>
// 创建地图对象,并设置中心点和缩放级别
var map = L.map('mapid').setView([39.92, 116.46], 13);
// 添加地图图层
var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
});
tileLayer.addTo(map);
// 创建一个点标记数组
var markers = [
[L.latLng(39.92, 116.46), '北京市'],
[L.latLng(31.23, 121.47), '上海市'],
[L.latLng(23.16, 113.23), '广州市'],
[L.latLng(22.54, 114.05), '深圳市']
];
// 遍历点标记数组,添加每个点标记到地图上
markers.forEach(function(marker) {
L.marker(marker[0]).bindPopup(marker[1]).addTo(map);
});
</script>
</body>
</html>
```
这段代码使用 Leaflet.js 创建了一个地图对象,并添加了一个 OSM 地图图层。接着创建了一个点标记数组,遍历数组并添加每个点标记到地图上。对于每个点标记,设置了它的经纬度和弹出窗口内容。你可以根据自己的需求修改这些参数。
阅读全文