点击显示弹出窗口
点击地图上的点标记，显示一个弹出窗口;
<!DOCTYPE html>
<html lang="en">
<head>
<title>点击显示弹出窗口</title>
<meta property="og:description" content="点击地图上的点标记，显示一个弹出窗口" />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js'></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
center: [-96, 37.8],
zoom: 3
});
// 地图加载完成后添加数据
map.on('load', () => {
// 添加一个GeoJSON源，其中包含兴趣点
map.addSource('places', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'description':
'<strong>华盛顿特区中国城</strong><p>位于华盛顿特区市中心，是华盛顿最古老的中国城社区。</p>'
},
'geometry': {
'type': 'Point',
'coordinates': [-77.021977, 38.89511]
}
},
{
'type': 'Feature',
'properties': {
'description':
'<strong>旧金山中国城</strong><p>美国历史最悠久的中国城，也是北美最大的中国城。</p>'
},
'geometry': {
'type': 'Point',
'coordinates': [-122.4068, 37.7936]
}
},
{
'type': 'Feature',
'properties': {
'description':
'<strong>纽约曼哈顿中国城</strong><p>美国最大的华人聚居区之一，位于纽约市曼哈顿下城。</p>'
},
'geometry': {
'type': 'Point',
'coordinates': [-73.9982, 40.7151]
}
},
{
'type': 'Feature',
'properties': {
'description':
'<strong>芝加哥中国城</strong><p>始于1912年，位于芝加哥南部，是芝加哥多元文化社区的重要组成部分。</p>'
},
'geometry': {
'type': 'Point',
'coordinates': [-87.6318, 41.8513]
}
},
{
'type': 'Feature',
'properties': {
'description':
'<strong>费城中国城</strong><p>位于费城市中心，是费城亚裔社区的文化中心。</p>'
},
'geometry': {
'type': 'Point',
'coordinates': [-75.1525, 39.9557]
}
},
{
'type': 'Feature',
'properties': {
'description':
'<strong>波士顿中国城</strong><p>新英格兰地区最大的华人社区，历史可追溯到19世纪早期。</p>'
},
'geometry': {
'type': 'Point',
'coordinates': [-71.0628, 42.3514]
}
},
{
'type': 'Feature',
'properties': {
'description':
'<strong>洛杉矶中国城</strong><p>加州最早的华人聚居地之一，拥有丰富的历史和文化遗产。</p>'
},
'geometry': {
'type': 'Point',
'coordinates': [-118.2388, 34.0622]
}
}
]
}
});
// 添加一个显示兴趣点的图层
map.addLayer({
'id': 'places',
'type': 'circle',
'source': 'places',
'paint': {
'circle-color': '#4264fb',
'circle-radius': 6,
'circle-stroke-width': 2,
'circle-stroke-color': '#ffffff'
}
});
// 当点击places图层上的要素时，在要素位置显示一个弹出窗口，
// 内容来自其属性中的描述
map.on('click', 'places', (e) => {
// 复制坐标数组
const coordinates = e.features[0].geometry.coordinates.slice();
const description = e.features[0].properties.description;
// 确保在地图缩小到显示多个要素副本时，
// 弹出窗口出现在用户点击的那个副本上
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new maplibregl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
// 当鼠标悬停在places图层上时，将鼠标指针改为指针
map.on('mouseenter', 'places', () => {
map.getCanvas().style.cursor = 'pointer';
});
// 当鼠标离开places图层时，将鼠标指针改回默认值
map.on('mouseleave', 'places', () => {
map.getCanvas().style.cursor = '';
});
});
</script>
</body>
</html>