为标记添加弹出窗口
将弹出窗口附加到标记实例;
<!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%; }
/* 自定义弹出窗口样式 */
.custom-popup {
font-family: 'Arial', sans-serif;
}
.custom-popup .maplibregl-popup-content {
padding: 15px;
max-width: 300px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.popup-header {
margin: 0 0 10px 0;
padding-bottom: 5px;
border-bottom: 1px solid #ddd;
font-size: 16px;
font-weight: bold;
color: #333;
}
.popup-content {
font-size: 14px;
line-height: 1.5;
color: #555;
}
.popup-image {
width: 100%;
max-height: 150px;
object-fit: cover;
border-radius: 5px;
margin: 10px 0;
}
.popup-button {
display: inline-block;
margin-top: 10px;
padding: 6px 12px;
background-color: #4285F4;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
text-decoration: none;
}
.popup-button:hover {
background-color: #3367D6;
}
</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: [116.3949, 39.9163],
zoom: 10
});
// 添加导航控件
map.addControl(new maplibregl.NavigationControl());
// 定义地标位置和信息
const landmarks = [
{
coordinates: [116.3949, 39.9163],
title: '北京故宫',
description: '中国明清两代的皇家宫殿，也是世界上现存规模最大、保存最为完整的木质结构古建筑之一。',
image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Forbidden_City_Beijing_Shenwumen_Gate.JPG/640px-Forbidden_City_Beijing_Shenwumen_Gate.JPG',
link: 'https://zh.wikipedia.org/wiki/%E5%8C%97%E4%BA%AC%E6%95%85%E5%AE%AB'
},
{
coordinates: [116.3912, 39.9061],
title: '天安门广场',
description: '位于北京市中心，是世界上最大的城市广场之一，也是中国重要的政治和文化象征。',
image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Tianmen_Square_Beijing_1988_with_towers.jpg/640px-Tianmen_Square_Beijing_1988_with_towers.jpg',
link: 'https://zh.wikipedia.org/wiki/%E5%A4%A9%E5%AE%89%E9%97%A8%E5%B9%BF%E5%9C%BA'
},
{
coordinates: [116.4071, 39.8819],
title: '天坛',
description: '明清两代帝王祭天的场所，建于明永乐十八年，是现存中国古代规模最大、伦理等级最高的祭祀建筑群。',
image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Temple_of_Heaven%2C_Beijing%2C_China_-_panoramio_%2812%29.jpg/640px-Temple_of_Heaven%2C_Beijing%2C_China_-_panoramio_%2812%29.jpg',
link: 'https://zh.wikipedia.org/wiki/%E5%A4%A9%E5%9D%9B'
},
{
coordinates: [116.2755, 39.9975],
title: '颐和园',
description: '始建于清朝乾隆年间，是中国现存规模最大、保存最完整的皇家园林，被誉为"皇家园林博物馆"。',
image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/SummerPalaceYiHeTing.jpg/640px-SummerPalaceYiHeTing.jpg',
link: 'https://zh.wikipedia.org/wiki/%E9%A2%90%E5%92%8C%E5%9C%92'
}
];
// 为每个地标添加标记和弹出窗口
landmarks.forEach(landmark => {
// 创建弹出窗口
const popup = new maplibregl.Popup({
closeButton: true,
closeOnClick: true,
anchor: 'bottom',
className: 'custom-popup',
offset: [0, -10]
})
.setHTML(`
<div class="popup-header">${landmark.title}</div>
<div class="popup-content">
<p>${landmark.description}</p>
<img class="popup-image" src="${landmark.image}" alt="${landmark.title}">
<div style="text-align: center;">
<a class="popup-button" href="${landmark.link}" target="_blank">了解更多</a>
</div>
</div>
`);
// 创建标记并附加弹出窗口
new maplibregl.Marker({
color: '#E74C3C'
})
.setLngLat(landmark.coordinates)
.setPopup(popup)
.addTo(map);
});
// 地图加载完成后，添加一些说明
map.on('load', () => {
// 创建一个欢迎弹出窗口
const welcomePopup = new maplibregl.Popup({
closeOnClick: false,
anchor: 'top-left',
className: 'custom-popup'
})
.setLngLat([116.3949, 39.9163])
.setHTML(`
<div class="popup-header">北京著名景点</div>
<div class="popup-content">
<p>欢迎浏览北京的著名景点地图。点击红色标记查看每个景点的详细信息。</p>
</div>
`)
.addTo(map);
// 2秒后自动关闭欢迎弹出窗口
setTimeout(() => {
welcomePopup.remove();
}, 5000);
});
</script>
</body>
</html>