如何在Leaflet地图中复制标记位置并生成定位链接

一、生成各类地图定位链接 #

基于标记的经纬度，直接拼接即可生成主流地图的定位链接，常见格式如下：

• Google地图：https://maps.google.com/?q=${lat},${lng}（你当前用的格式，打开后会直接定位到对应坐标）
• 高德地图：https://uri.amap.com/marker?position=${lng},${lat}&name=定位点（注意高德采用经度在前、纬度在后的顺序）
• 百度地图：http://api.map.baidu.com/marker?location=${lat},${lng}&title=定位点&output=html

二、完善剪贴板复制逻辑 #

你当前的代码已经实现了基础复制功能，但可以补充错误处理和兼容性方案，避免部分浏览器不支持navigator.clipboard的情况：

// 从标记/订单信息中获取经纬度
const lat = this.orderInfo.latitude;
const lng = this.orderInfo.longitude;
// 生成Google地图定位链接
const locationUrl = `https://maps.google.com/?q=${lat},${lng}`;

// 封装复制函数
async function copyLocationUrl() {
  try {
    if (navigator.clipboard) {
      await navigator.clipboard.writeText(locationUrl);
      alert('定位链接已复制到剪贴板');
    } else {
      // 兼容不支持Clipboard API的旧浏览器
      const textArea = document.createElement('textarea');
      textArea.value = locationUrl;
      textArea.style.position = 'fixed'; // 避免页面滚动
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand('copy');
      document.body.removeChild(textArea);
      alert('定位链接已复制到剪贴板');
    }
  } catch (err) {
    console.error('复制失败:', err);
    alert('复制链接失败，请手动复制');
  }
}

// 执行复制
copyLocationUrl();

三、给Leaflet标记绑定复制事件（可选） #

如果要直接给Leaflet地图上的标记绑定点击复制功能，可参考以下代码：

// 假设你已创建Leaflet标记marker
marker.on('click', function(e) {
  const { lat, lng } = e.target.getLatLng();
  const locationUrl = `https://maps.google.com/?q=${lat},${lng}`;
  
  // 复用上面的copyLocationUrl函数
  copyLocationUrl(locationUrl);
});

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