Mapbox 更改某些位置的圖標

Question

我對 Mapbox GL JS 比較陌生，我正在做一個項目，我發現要更改地圖上某些位置的顏色和圖標。 我去了 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;
  }

地圖截圖

假設我想更改唯一 ID 為 12345 的餐廳 Plum Bistro 的圖標和圖標顏色，並有一個顯示其信息的彈出窗口，我該怎么做？

Answer 1

您可以將 innterHTML 添加到您的 el （標記）。 檢查這個：

// 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';
    el.innerHTML = '<img src="YOUR URL TO A IMG ex: /assets/marker-on-map.svg">';
    // make a marker for each feature and add to the map