【基于高德的地址坐标转换工具】

原创 已于 2025-07-01 15:45:32 修改 · 1k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

于 2025-07-01 10:23:54 首次发布
该文章已生成可运行项目，

1. 项目简介

本工具支持通过高德地图API实现Excel批量地址转坐标、坐标转地址，并可在地图上可视化标记，支持表格内容编辑、导出。适用于地理信息批量处理、数据校验等场景。

2. 功能概述

  • Excel文件上传，自动解析表头和数据。
  • 地址转坐标：批量将地址列转为经纬度坐标。
  • 坐标转地址：批量将坐标列转为详细地址。
  • 地图可视化：所有结果可在高德地图上自动标记。
  • 表格可编辑：所有单元格（包括坐标、地址）均可直接编辑。
  • 城市代码自定义：支持下拉/输入选择城市，自动切换地理编码范围。
  • 导出Excel：可导出编辑后的完整数据。
  • 进度与状态提示：操作过程有进度条和状态提示。

3. 使用步骤

3.1 获取高德地图Web服务Key

  1. 注册并登录高德开放平台.
  2. 创建应用，获取Web服务Key。

3.2 打开工具页面

  1. 在页面顶部输入你的高德地图Web服务Key，点击“更新Key”。
  2. 选择或输入城市（支持下拉和手动输入），点击“更新城市”。

3.3 上传Excel文件

  1. 拖拽或点击选择Excel文件（支持.xlsx、.xls）。
  2. 文件上传后，自动解析表头和数据，显示在表格中。

3.4 地址转坐标

  1. 在“选择地址列”下拉框中选择包含地址的列。
  2. 点击“获取坐标”，系统自动批量获取经纬度，进度条实时显示。
  3. 获取到的坐标会自动填入表格，并在地图上标记。

3.5 坐标转地址

  1. 在“选择坐标列”下拉框中选择包含坐标的列。
  2. 点击“获取地址”，系统自动批量获取详细地址，进度条实时显示。
  3. 获取到的地址会自动填入表格，并在地图上标记。

3.6 表格编辑与导出

  • 所有单元格会在最后新增两列（包括坐标、地址）均可直接编辑，内容实时同步。
  • 点击“导出Excel”可导出当前编辑后的完整数据。

4. 注意事项

  • API Key和城市请根据实际需求填写，避免频繁请求导致高德API限流。
  • 城市选择支持下拉和手动输入，常用城市已内置，更多城市可自行扩展。
  • 地图边界已放大为中国全境，可自由拖拽查看全国范围。
  • 支持大批量数据处理，虽然做了随机延迟功能，但还是建议分批操作以防API限流。

5. 代码实现

系统操作截图：
在这里插入图片描述
在这里插入图片描述

下面为完整的前端HTML+JS代码，直接保存为 html 即可使用。
模拟数据以扬州为例
城市编码也可以使用中文，如：扬州市、321、32100。详细接口文档参考高德web服务地址解析

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Excel地址坐标转换工具</title>
    <!-- 引入高德地图JavaScript API -->
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=7cad1eef18edbb65ef7060e41a70e45f"
    ></script>
    <style>
      body {
     
     
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f5f5f5;
      }
      .header {
     
     
        background: white;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
      }
      .api-key-section {
     
     
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;
      }
      .api-key-section input {
     
     
        flex: 1;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
      }
      .api-key-section button {
     
     
        padding: 8px 15px;
        background-color: #28a745;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      .api-key-section button:hover {
     
     
        background-color: #218838;
      }
      .main-container {
     
     
        display: flex;
        gap: 20px;
        height: calc(100vh - 160px);
      }
      .left-panel {
     
     
        width: 50vw;
        min-width: 350px;
        max-width: 50vw;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
      }
      .right-panel {
     
     
        width: 50vw;
        min-width: 350px;
        max-width: 50vw;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      .upload-section {
     
     
        border: 2px dashed #ccc;
        padding: 8px 10px;
        text-align: center;
        margin: 12px 20px 8px 20px;
        border-radius: 8px;
        font-size: 14px;
      }
      .upload-section.dragover {
     
     
        border-color: #007bff;
        background-color: #f8f9fa;
      }
      .controls {
     
     
        margin: 0 20px 10px 20px;
        padding: 10px;
        background-color: #f8f9fa;
        border-radius: 5px;
      }
      .controls select,
      .controls button {
     
     
        margin: 5px;
        padding: 8px 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
      .controls button {
     
     
        background-color: #007bff;
        color: white;
        cursor: pointer;
      }
      .controls button:hover {
     
     
        background-color: #0056b3;
      }
      .controls button:disabled {
     
     
        background-color: #6c757d;
        cursor: not-allowed;
      }
      .progress {
     
     
        margin: 0 20px 10px 20px;
        padding: 8px;
        background-color: #e9ecef;
        border-radius: 4px;
        display: none;
      }
      .progress-bar {
     
     
        width: 100%;
        height: 18px;
        background-color: #dee2e6;
        border-radius: 10px;
        overflow: hidden;
      }
      .progress-fill {
     
     
        height: 100%;
        background-color: #007bff;
        width: 0%;
        transition: width 0.3s ease;
      }
      .table-container {
     
     
        flex: 1;
        margin: 0 20px 20px 20px;
        overflow-y: auto;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
      table {
     
     
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
      }
      th,
      td {
     
     
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
        height: 36px;
        min-width: 80px;
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
      }
      .table-input {
     
     
        width: 100%;
        height: 100%;
        border: none;
        background: transparent;
        padding: 0 4px;
        font-size: 12px;
        box-sizing: border-box;
        outline: none;
      }
      th {
     
     
        background-color: #f2f2f2;
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 10;
      }
      .status {
     
     
        margin: 0 20px 10px 20px;
        padding: 8px;
        border-radius: 4px;
      }
      .status.success {
     
     
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
      }
      .status.error {
     
     
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
      }
      .status.info {
     
     
        background-color: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
      }
      #map {
     
     
        width: 100%;
        flex: 1;
        min-height: 400px;
        height: 100%;
      }
      .map-info {
     
     
        padding: 12px 15px;
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
      }
      .map-info h3 {
     
     
        margin: 0 0 8px 0;
        color: #495057;
      }
      .map-info p {
     
     
        margin: 4px 0;
        color: #6c757d;
        font-size: 13px;
      }
    </style>
  </head>
  <body>
    <!-- 头部区域 -->
    <div class="header">
      <h1>Excel地址坐标转换工具</h1>
      <div class="api-key-section">
        <label for="apiKeyInput">高德地图Web服务Key：</label>
        <input type="text" id="apiKeyInput" placeholder="请输入您的高德地图Web服务Key" />
        <button onclick="updateApiKey()">更新Key</button>
        <label for="cityCodeInput">城市：</label>
        <input
          list="cityList"
          id="cityCodeInput"
          placeholder="请输入城市名或代码"
          value="扬州市"
          style="width: 120px"
        />
        <datalist id="cityList">
          <option value="北京市" data-code="010"></option>
          <option value="上海市" data-code="021"></option>
          <option value="广州市" data-code="020"></option>
          <option value="深圳市" data-code="0755"></option>
          <option value="南京市" data-code="025"></option>
          <option value="扬州市" data-code="321"></option>
          <option value="重庆市" data-code="023"></option>
          <option value="天津市" data-code="022"></option>
          <option value="成都市" data-code="028"></option>
          <option value="西安市" data-code="029"></option>
          <option value="武汉市" data-code="027"></option>
          <option value="苏州市" data-code="0512"
本文章已经生成可运行项目
最低0.47元/天 解锁文章
大张lucio
关注
地址转坐标：利用高德API进行批量地理编码
weixin_45812624的博客
08-05 9942
本文介绍了如何批量将地址数据转换为地理坐标的几种方法。首先，通过使用高德地图的地理编码API，可以直接在线批量转换地址为GCJ-02坐标系下的经纬度坐标。此方法适用于个人开发者，每日限额为5000条数据。对于无法自动转换的地址，可以手动使用高德坐标拾取器获取坐标。此外，还提供了Python脚本示例，用于自动化处理XLSX文件中的地址数据，将其转换为带有经纬度的坐标信息，并保存为新的Excel文件。对于需要转换坐标系的需求，可以利用在线工具将GCJ-02坐标转换为WGS84或BD09坐标系。
【数据工具】地址转坐标工具V.1.02（支持高德地图API及百度地图API，融合提高精度）
chenxu0136的博客
07-21 3816
地理编码工具是一款能够让用户在不写代码的前提下快速将文本地址转换成经纬度坐标的软件。
百度高德坐标系相互转换
weixin_46371752的博客
09-24 2869
坐标系转换，百度坐标转成高德坐标系，高德坐标系转成百度坐标系
地址（地点）经纬度批量互转及坐标系转换方法（白嫖！！！）
热门推荐
输出既学习
08-20 1万+
通过本文方法，您可以免费高效地实现地址到经纬度的批量转换，无论是小规模的数据处理还是大规模的数据转换需求，都有相应的解决（白嫖）方案。
坐标地址转换
Technology_liu的博客
10-14 1560
js版 /** * Created by Wandergis on 2015/7/8. * 提供了百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换 */ //定义一些常量 var x_PI = 3.14159265358979324 * 3000.0 / 180.0; var PI = 3.1415926535897932384626; var a ...
地图--WGS84 高德坐标 百度坐标的相互转换（好用推荐）
VIP_CR的博客
09-21 1万+
地图 WGS84 高德坐标 百度坐标的相互转换
精选资源
地理坐标系转换工具（百度、高德、84坐标互转）
03-25
本文将深入探讨“地理坐标系转换工具”，包括百度、高德和84坐标系之间的转换，并结合提供的压缩包文件“坐标转换工具”来阐述相关知识。 首先，我们要理解什么是地理坐标系。地理坐标系是用于定位地球上任何位置的...
Android中GPS坐标转换为高德地图坐标详解
08-31
在Android中，高德地图SDK提供了一个方便的工具类`CoordinateConverter`用于坐标转换。通过调用`from()`方法设置源坐标类型，然后使用`coord()`方法传入GPS坐标，最后通过`convert()`方法完成转换。以下是一个示例...
精选资源
Visual Studio C# 编写加密火星坐标转换，国内高德、腾讯、百度地图通用坐标系统
09-30
在本项目中，我们利用Visual Studio C#编写了一个加密火星坐标转换工具，该工具能够实现WGS84坐标与GCJ02坐标之间的转换，以及GCJ02坐标与BD09百度坐标之间的转换。 具体来说，本项目包含了以下几个主要功能： 1. ...
geojson文件坐标转换工具
05-24
本项目提供了一个用C#编写的GeoJSON文件坐标转换工具，支持WGS84、GCJ02（国测局加密坐标系，也称火星坐标）以及百度坐标之间的相互转换。 1. **WGS84坐标系**：这是一个全球通用的大地坐标系统，广泛应用于GPS设备...
地址转坐标工具 : 根据地名地址匹配坐标
07-13
根据地名地址匹配坐标，可批量，需要申请key，简单方便、精准
批量地址解析（地址转坐标）
07-11
HTML页面，浏览器中打开即可批量获取地址对应的地理坐标。 使用方法：在C盘根目录下创建list.txt文本文件，把要批量获取的地址输入到文件中，每行一个。使用IE浏览器打开HTML页面点击“开始解析”即可（打开页面时会提示对否允许网页运行脚本或ActiveX，选择允许）。
高德地图demo，通过高德地图选择位置获取经纬度，并把经纬度转换为中文详细地址
07-20
高德地图demo，通过高德地图选择位置获取经纬度，并把经纬度转换为中文详细地址，详细地址包括省市区县乡镇街道门牌号，在代码中需要替换自己的key，必须是js web key奥。
百度、高德，WGS84坐标批量转换工具
04-01
用于百度、高德坐标的批量转换，需要先安装AccessDatabaseEngine
高德坐标系到WGS84坐标系转换_R语言
10-14
运用r语言，对获得的高德坐标系下的poi点坐标进行转换，使其成为WGS84坐标系下坐标，便于使用ArcGIS分析
高德地图与百度地图坐标相互转化
weixin_45962222的博客
02-16 6257
高德地图与百度地图坐标相互转化
高德百度坐标系转换方法
agongcao9295的博客
03-14 498
在开始这个题目之前，先给大家再次扫扫盲，扫的不是坐标系统的盲，而是我们国家所使用的坐标系统。大家都知道，美国GPS使用的是WGS84的坐标系统，以经纬度的形式来表示地球平面上的某一个位置，这应该是国际共识。但在我国，出于国家安全考虑，国内所有导航电子地图必须使用国家测绘局制定的加密坐标系统，即将一个真实的经纬度坐标加密成一个不正确的经纬度坐标，我们在业内将前者称之为地球坐标，后者称之为火...
高德API坐标转换
orsahi_zhang的博客
10-06 2298
高德API里可以进行坐标转换。 步骤（取自高德API开发指南）： 第一步，申请”Web服务API”密钥（Key）； 第二步，拼接HTTP请求URL，第一步申请的Key需作为必填参数一同发送； 第三步，接收HTTP请求返回的数据（JSON或XML格式），解析数据。 第二步，关于“拼接HTTP请求URL”网上讲述的大多太复杂。直接按照服务示例替换掉key后用浏览器打开，出现错误“INVALID_USER_KEY”。根据错误码说明，该错误是“key不正确或过期”“开发者发起请求时，传入的key不正确或者过期 ”。
高德火星坐标(GCJ-02)转WGS84坐标
最新发布
Winemonk
04-21 1877
【代码】高德火星坐标(GCJ-02)转WGS84坐标。
WGS84坐标与百度高德批量转换工具指南
这意味着所提到的坐标转换工具可能需要访问数据库文件，或者涉及到数据库文件的操作。 在实际应用中，可能是因为该工具使用了某种数据库来存储原始坐标数据，或者用于输出转换后的坐标数据。同时，可能还涉及到文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值