如何在Mapbox Popup中使用setHTML()实现名称文本跳转？

你代码里存在几个关键错误，导致超链接无法正常工作，以下是修正方案：

错误分析 #

• 解构赋值错误：forEach参数里的descriptionlngLat缺少逗号，应为description, lngLat，否则变量无法正确读取
• 方法调用对象错误：setHTML是Popup的实例方法，不能调用在Marker上
• HTML字符串格式错误：description中的内容不需要用反引号包裹，且原代码里<a>标签未闭合
• 未匹配需求：需求是将name设为超链接，需把name嵌入到<a>标签中，而非单独添加描述文本

修正后的完整代码 #

mapboxgl.accessToken = 'pk.eyJ1Ijoic2l5dWNjaGVuIiwiYSI6ImNsYnZoYjViZzJoNXozcHBqbzR1Y2pxZjQifQ.5H9fghwphrlDGMgs2bgnqQ';

const bounds = [
  [120.993700, 30.669902], // Southwest coordinates
  [122.209481, 31.828037] // Northeast coordinates
];  

const map = new mapboxgl.Map({
  container: 'map', // container ID
  style: 'mapbox://styles/siyucchen/clbwfvq7t000815rw928y0oak', // style URL
  center: [121.487, 31.2239], // starting position [lng, lat]
  maxZoom: 18,
  minZoom: 14.9,
  maxBounds: bounds
});

// 给每个地点添加对应跳转链接
const list = [
  {
    name: 'Intersection between Beikongjia Alley and Jinjiafang Road',
    color: '#cf302d',
    link: 'link1.html',
    lngLat: [121.480965,31.223564],
  },
  {
    name: 'Interior of No.91, Jinjiafang Road',
    color: '#cf302d',
    link: 'link2.html',
    lngLat: [121.48199,31.22394]
  }                 
];

list.forEach(({name, color, link, lngLat}) => {
  // 直接用setHTML创建包含超链接的弹窗内容，将name作为链接文本
  const popup = new mapboxgl.Popup({ offset: 25 })
    .setHTML(`<a href="${link}">${name}</a>`);

  new mapboxgl.Marker({
    color,
    scale: 0.6
  })  
  .setLngLat(lngLat)
  .setPopup(popup)
  .addTo(map);
});

map.on('load', () => {
  map.setFog({});
});

map.scrollZoom.enable({around: 'center'});

关键修正点 #

1. 在数据列表中新增link字段，存储每个地点对应的跳转页面地址
2. 正确解构link和lngLat变量，避免赋值错误
3. 创建Popup时直接调用setHTML，传入包含name的超链接HTML字符串，实现点击name跳转的需求
4. 修正了原代码中错误调用setHTML的问题，确保方法调用在正确的实例上

内容的提问来源于stack exchange，提问作者Siyu Chen