我对Mapbox GL JS比较陌生,我正在做一个项目,我发现要改变Map上某些位置的颜色和图标。我去了Mapbox Studio,并能够获得这些位置的特定ID。但是,我不知道如何在我的JS代码中匹配它们,并改变它们的颜色和图标。
我还尝试显示一个弹出窗口,当用户点击这些位置的图标时显示这些位置的信息。也很难匹配id并打开弹出窗口。
这是我目前的JS代码:
const police_station = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"icon": "police-15",
"color": "#004cff",
"title": "City of Seattle Police Department",
"description": "1519 12th Ave, Seattle, WA 98122"
},
"geometry": {
"type": "Point",
"coordinates": [-122.31725715100764,
47.614924945431525
]
}
}]
}
// User can click on icon to comment and view information
for (const feature of police_station.features) {
// create a HTML element for each feature
const el = document.createElement('div');
el.className = 'police';
// make a marker for each feature and add to the map
new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).setPopup(new mapboxgl.Popup({
offset: 25
}).setHTML(`
<h2>${feature.properties.title}</h2>
<p>${feature.properties.description}</p>
<button class="open-button" onclick="openForm()">Comment</button>`)).addTo(map);
CSS:
.police {
background-image: url('../assets/police.svg');
background-size: cover;
width: 25px;
height: 25px;
border-radius: 50%;
cursor: pointer;
}
Screenshot of Map
让我们假设我想更改餐厅Plum Bistro的图标和图标颜色(唯一ID为12345),并让一个弹出窗口显示其信息,我该怎么做呢?
1条答案
按热度按时间gg58donl1#
你可以把interHTML添加到el(标记)中。检查一下: