mapbox-gl 点击不同的标记点弹出弹窗
时间: 2023-09-15 11:19:07 浏览: 55
要在 mapbox-gl 中为不同的标记点添加弹窗,需要执行以下步骤:
1. 创建一个地图并添加标记点,每个标记点都应该有一个唯一的 ID。
```javascript
// 创建地图
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-98.5795, 39.8283],
zoom: 3
});
// 添加标记点
map.on('load', function() {
map.addSource('places', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
id: 'marker1',
title: 'New York City'
},
geometry: {
type: 'Point',
coordinates: [-74.0059, 40.7128]
}
},
{
type: 'Feature',
properties: {
id: 'marker2',
title: 'San Francisco'
},
geometry: {
type: 'Point',
coordinates: [-122.4194, 37.7749]
}
}
]
}
});
map.addLayer({
id: 'places',
type: 'circle',
source: 'places',
paint: {
'circle-radius': 10,
'circle-color': '#3887be'
}
});
});
```
2. 创建一个弹窗,将其添加到地图上但保持隐藏状态。
```javascript
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
// 在地图上添加弹窗
map.on('mouseenter', 'places', function(e) {
// 显示弹窗
map.getCanvas().style.cursor = 'pointer';
var coordinates = e.features[0].geometry.coordinates.slice();
var title = e.features[0].properties.title;
// 设置弹窗内容
popup.setLngLat(coordinates)
.setHTML('<h3>' + title + '</h3>')
.addTo(map);
});
map.on('mouseleave', 'places', function() {
// 隐藏弹窗
map.getCanvas().style.cursor = '';
popup.remove();
});
```
3. 在上述步骤中,我们将弹窗添加到地图上并在鼠标进入标记点时显示它。现在我们需要在鼠标点击标记点时显示它。
```javascript
map.on('click', 'places', function(e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var title = e.features[0].properties.title;
// 设置弹窗内容
popup.setLngLat(coordinates)
.setHTML('<h3>' + title + '</h3>')
.addTo(map);
});
```
这些步骤将为每个标记点创建一个弹窗,并在鼠标进入或点击标记点时显示它。您可以根据需要自定义弹窗样式和内容。