如何将JavaScript变量内的随机城市名设置为可点击的谷歌地图跳转链接

实现思路 #

• 首先使用谷歌地图的地点搜索URL规则：https://www.google.com/maps/search/[城市名称]，把随机生成的城市名拼接到这个URL后作为跳转地址
• 生成城市名时，不要直接把文本插入p标签，而是把城市名包裹在a标签内，设置对应的href属性即可
• 可选补充：为城市名的a标签加target="_blank"属性，点击后在新标签页打开地图，不影响当前生成器页面使用

代码修改方案 #

1. 修改JavaScript逻辑 #

把原来的gentext函数改成如下写法：

function gentext() {
  var word=['Aadorp', 'Aagtdorp', 'Aagtekerke', 'Aalbeek', 'Aalden', 'Aaldonk', 'Aalsmeer', 'Aalst', 'Aalsum', 'Aalten', ];
  // 随机取城市名
  var randomCity = word[Math.floor(Math.random()*word.length)];
  var para=document.querySelector('.plaatsnaam');
  // 拼接a标签，href指向谷歌地图搜索地址，新标签页打开
  para.innerHTML = `<a href="https://www.google.com/maps/search/${encodeURIComponent(randomCity)}" target="_blank">${randomCity}</a>`;
}

这里用encodeURIComponent处理城市名，是为了兼容带特殊字符、空格的城市名称，避免URL解析出错。

2. 可选优化CSS样式 #

为了让城市名链接和原有样式统一，你可以在CSS里添加如下规则，去掉默认的链接下划线、调整颜色：

.plaatsnaam a {
  color: inherit;
  text-decoration: none;
}
/* 可以加 hover 效果提升交互感 */
.plaatsnaam a:hover {
  opacity: 0.8;
}

修改完成后，点击生成的城市名就会直接跳转到谷歌地图对应地点的搜索结果页，原有生成逻辑无需调整，仅修改插入DOM的结构即可。

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