如何在Mapbox GL JS弹窗中添加超链接并修复代码语法报错

问题根源说明 #

你遇到的语法报错和超链接不生效的问题来自两个低级写法错误：

• 字符串拼接语法错误：原有代码中<a href="currentFeature.properties.Link">'further details+'</a>部分，字符串提前错误闭合，导致JS解析时识别不到合法的参数结束位置，触发「参数列表后缺失)」报错
• 变量未正确解析：你直接把currentFeature.properties.Link写在固定字符串中，不会被识别为GeoJSON的字段变量，所有弹窗的链接都会固定为这段文本，不会读取对应URL

解决方案 #

修正后的传统字符串拼接写法

.setHTML(
  '<h3>' +
  currentFeature.properties.Name +
  '</h3>' +
  '<h4>' +
  currentFeature.properties.Height +
  '</h4>' +
  '<a href="' + currentFeature.properties.Link + '">further details</a>'
)

更推荐的ES6模板字符串写法（无需拼接、不易出错）

用反引号包裹整段HTML，变量直接用${}包裹即可自动解析：

.setHTML(`
  <h3>${currentFeature.properties.Name}</h3>
  <h4>${currentFeature.properties.Height}</h4>
  <a href="${currentFeature.properties.Link}">further details</a>
`)

如果需要点击超链接后在新标签页打开，给a标签添加target="_blank"属性即可：

<a href="${currentFeature.properties.Link}" target="_blank">further details</a>

内容的提问来源于stack exchange，提问作者Jonathan Hall