纯JS实现经纬度拼接静态地图链接并下载图片方案咨询

嘿，这有个零依赖、纯前端JS的极简方案，完美适配你的需求——传入经纬度就能自动拼接地图链接并触发下载：

async function downloadStaticMap(lat, lng) {
  // 拼接静态地图链接
  const mapUrl = `http://staticmap.openstreetmap.de/staticmap.php?center=${lat},${lng}&zoom=15&size=500x500`;
  
  try {
    // 获取图片Blob数据（处理跨域问题）
    const response = await fetch(mapUrl);
    const blob = await response.blob();
    
    // 创建可下载的临时URL
    const downloadUrl = URL.createObjectURL(blob);
    
    // 创建隐藏的<a>标签触发下载
    const link = document.createElement('a');
    link.href = downloadUrl;
    // 自定义下载文件名，用经纬度命名方便区分
    link.download = `map_${lat}_${lng}.png`;
    // 触发点击动作
    link.click();
    
    // 清理临时URL，避免内存泄漏
    URL.revokeObjectURL(downloadUrl);
  } catch (error) {
    console.error('下载失败:', error);
    alert('地图图片下载失败，请检查网络或链接格式');
  }
}

// 调用示例：传入你的纬度和经度
downloadStaticMap(14.51233, 9);

关键细节说明： #

• 跨域处理：用fetch获取Blob是最稳妥的跨域图片下载方式，能避开直接用img标签加载后转Canvas可能遇到的跨域权限限制
• 自动触发下载：通过创建隐藏的<a>标签并设置download属性，浏览器会自动弹出保存对话框，让用户自行选择本地保存位置
• 内存清理：用完临时URL后调用URL.revokeObjectURL释放内存，养成良好的代码习惯
• 容错处理：加入try-catch捕获网络或链接错误，给用户直观的错误提示

如果你的场景确定没有跨域限制（比如地图服务和你的页面同域），还能再简化一步：

function downloadStaticMapSimple(lat, lng) {
  const mapUrl = `http://staticmap.openstreetmap.de/staticmap.php?center=${lat},${lng}&zoom=15&size=500x500`;
  const link = document.createElement('a');
  link.href = mapUrl;
  link.download = `map_${lat}_${lng}.png`;
  link.click();
}

不过还是推荐第一种带Blob处理的方案，兼容性和稳定性更好~

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