HTML标记为每个点创建一个DOM元素。超过约100个位置后，浏览器在布局/绘制上花费过多时间。符号图层完全绕过DOM — GPU在单个WebGL绘制调用中绘制所有点。

符号图层实现（最适合100–1,000个位置）。对于HTML标记（少于100个）或聚类（超过1,000个），请参阅references/markers.md。

javascript
map.on(load, () => {
// 添加门店数据作为源
map.addSource(stores, {
type: geojson,
data: stores
});

// 添加自定义标记图像
map.loadImage(/marker-icon.png, (error, image) => {
if (error) throw error;
map.addImage(custom-marker, image);

// 添加符号图层
map.addLayer({
id: stores-layer,
type: symbol,
source: stores,
layout: {
icon-image: custom-marker,
icon-size: 0.8,
icon-allow-overlap: true,
text-field: [get, name],
text-font: [Open Sans Bold, Arial Unicode MS Bold],
text-offset: [0, 1.5],
text-anchor: top,
text-size: 12
}
});
});

// 使用交互API处理标记点击（推荐）
map.addInteraction(store-click, {
type: click,
target: { layerId: stores-layer },
handler: (e) => {
const store = e.feature;
flyToStore(store);
createPopup(store);
}
});

// 或使用传统事件监听器：
// map.on(click, stores-layer, (e) => {
// const store = e.features[0];
// flyToStore(store);
// createPopup(store);
// });

// 悬停时更改光标
map.on(mouseenter, stores-layer, () => {
map.getCanvas().style.cursor = pointer;
});

map.on(mouseleave, stores-layer, () => {
map.getCanvas().style.cursor = ;
});
});

第3步：构建交互式位置列表

javascript
function buildLocationList(stores) {
const listingContainer = document.getElementById(listings);

stores.features.forEach((store, index) => {
const listing = listingContainer.appendChild(document.createElement(div));
listing.id = listing-${store.properties.id};
listing.className = listing;

const link = listing.appendChild(document.createElement(a));
link.href = #;
link.className = title;
link.id = link-${store.properties.id};
link.innerHTML = store.properties.name;

const details = listing.appendChild(document.createElement(div));
details.innerHTML =

${store.properties.address}

${store.properties.phone || }

// 处理列表项点击
link.addEventListener(click, (e) => {
e.preventDefault();
flyToStore(store);
createPopup(store);
highlightListing(store.properties.id);
});
});
}

function flyToStore(store) {
map.flyTo({
center: store.geometry.coordinates,
zoom: 15,
duration: 1000
});
}

function createPopup(store) {
const popups = document.getElementsByClassName(mapboxgl-popup);
// 移除现有弹出窗口
if (popups[0]) popups[0].remove();

new mapboxgl.Popup({ closeOnClick: true })
.setLngLat(store.geometry.coordinates)
.setHTML(

${store.properties.name}

${store.properties.address}

${store.properties.phone}

// 重要：highlightListing必须包含scrollIntoView — 没有它，
// 在地图上选择标记不会将侧边栏滚动到该列表项。
function highlightListing(id) {
// 移除现有高亮
const activeItem = document.getElementsByClassName(active);
if (activeItem[0]) {
activeItem[0].classList.remove(active);
}

// 为选中的列表项添加高亮
const listing = document.getElementById(listing-${id});
listing.classList.add(active);

// 将