我有一个在地图上具有不同点的数据集，以GeoJSON的形式存储在GitHub上。我想为该数据集的每个点分配弹出窗口，单击该窗口时将显示其某些数据属性。我设法从Mapbox教程中复制了一些代码，但我不知道如何用标记将GeoJSON文件中的点连接起来。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.marker {
background-image: url(https://placekitten.com/g/);
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiamFua29tYWciLCJhIjoiY2ozNmNhMXQyMDQ4czMybzl6YTN2cDM0ciJ9.naD_i9iNOl_CEZ3WkY8Nvg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-96, 37.8],
zoom: 3
});
map.addSource('worldcities_points', {
type: 'geojson',
data: 'https://github.com/jankomag/worldcitiespopchange/blob/master/readycities_geojson.geojson'
});
// add markers to map
geojson.features.forEach(function(marker) {
// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)';
el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';
el.addEventListener('click', function() {
window.alert(marker.properties.message);
});
// make a marker for each feature and add to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
});
</script>
</body>
</html>
首先，我建议您不要共享您的访问令牌。其他人可以使用它，您需要付费。您已经共享了，请禁用它。
我对您的代码有一些评论：
map.addSource（'worldcities_points'，{类型：“ geojson”，数据：“ https://github.com/jankomag/worldcitiespopchange/blob/master/readycities_geojson.geojson”}）;
->将其添加为图层：
// Add a layer showing the places.
map.addLayer({
'id': 'worldcities_points',
'type': 'symbol',
'source': 'worldcities_points',
'layout': {
'icon-image': '{icon}-15',
'icon-allow-overlap': true
}
});为对象创建弹出窗口后，尝试将它们添加到地图中：
// Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
// Open the popup when mouse hover over the position of the object
map.on('mouseenter', 'places', function(e) {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.description;// assuming your source geoJSON contains properties.descriptions
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
// Populate the popup and set its coordinates
// based on the feature found.
popup
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
// remove the popup when the mouse leaves the position of the object
map.on('mouseleave', 'places', function() {
map.getCanvas().style.cursor = '';
popup.remove();
});那应该让您弹出窗口！如果您有任何问题，请告诉我！