高德地图技术文档

原创已于 2025-11-02 19:07:03 修改 · 376 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#dubbo

于 2025-11-02 12:46:01 首次发布

通用前置步骤：获取 API Key

场景一：Web 端接入（JS API）

场景二：Android 端接入

概述

因为现在的工作主要是做GIS方面的项目，所以被指派的项目需要使用到高德地图，所以写一篇文章来记录一下高德地图的相关技术吧。

现在市面上的主流视频平台，有腾讯地图，百度地图、高德地图、天地图。

腾讯地图依靠微信的社交霸主地图，使用人数第一，百度地图是最早深入地图领域的，所以技术流使用广泛，技术也比较深入，高德地图则是地图的后起之秀，背靠阿里系，天地图是政府支持的项目，比较权威和中立。以后如果有人支持这方面的文章，也会陆续写这方面的文章。

高德地图的接入

高德地图 API 支持 Web、Android、iOS 等多平台接入，核心流程均为获取 API Key→配置依赖 / 引入 SDK→初始化功能，以下是 Web 端和 Android 端这两个主流场景的详细接入步骤，适配多数开发需求：

通用前置步骤：获取 API Key

无论哪个平台，接入前都需获取 API 密钥，它是调用服务的核心凭证：

访问高德开放平台，注册并登录开发者账号。

登录后进入控制台，点击应用管理→我的应用，再点击创建应用，填写应用名称、应用类型等信息提交。

应用创建后，点击添加 Key，选择对应服务平台（如 Web 端选 “Web 端 (JS API)”，Android 端选 “Android 平台”），按提示填写信息，提交后即可生成 API Key。2021 年 12 月后创建的 Key，还需记录对应的安全密钥用于安全配置。

引入 API

html引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高德地图测试</title>
    <!-- 引入高德地图JS API -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=86cc0f84ff37dae2875e6555aa6eb5ab"></script>
    <style>
        #container {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>

<div id="container"></div>
<script>
    var map = new AMap.Map('container', {
        zoom: 11,
        center: [116.397428, 39.90923],
        viewMode: '3D'
    });
</script>

</body>
</html>

npm install @amap/amap-jsapi-loader --save

再在 JS 代码中引入并加载：

import './style.css'
import AMapLoader from '@amap/amap-jsapi-loader';

const AMap = await AMapLoader.load({
    key: '86cc0f84ff37dae2875e6555aa6eb5ab',
    version: '2.0',
    plugins: [] // 需用到的插件，如路径规划填['AMap.RouteSearch']
});

const map = new AMap.Map('container', {
    zoom: 11,
    center: [116.397428, 39.90923],
    viewMode: '3D'
});

查询POI

关键词检索（指定城市）

根据关键词在特定城市内搜索 POI（如 “北京火锅店”）：

// 初始化地图
const map = new AMap.Map('container', {
  zoom: 13,
  center: [116.397428, 39.90923] // 北京坐标
});

// 初始化POI查询对象
const placeSearch = new AMap.PlaceSearch({
  pageSize: 10, // 每页结果数（默认10，最大50）
  pageIndex: 1, // 页码
  city: '北京市', // 城市名或adcode（如110000）
  citylimit: true, // 限制在指定城市内搜索
  map: map, // 结果标注在地图上
  panel: 'resultPanel' // 结果显示面板（需添加<div id="resultPanel"></div>）
});

// 执行搜索：关键词+回调函数
placeSearch.search('火锅店', (status, result) => {
  if (status === 'complete') {
    console.log('查询成功，结果：', result);
    // 解析结果：POI列表在 result.poiList.pois 中
    const pois = result.poiList.pois;
    pois.forEach(poi => {
      console.log(`名称：${poi.name}，地址：${poi.address}，坐标：${poi.location.lng},${poi.location.lat}`);
    });
  } else {
    console.log('查询失败：', result);
  }
});

（2）周边查询（中心点 + 半径）

以某个坐标为中心，在指定半径（米）内搜索 POI（如 “天安门周边 1 公里的酒店”）：

javascript

运行

// 周边搜索：关键词、中心点、半径（米）
placeSearch.searchNearBy(
  '酒店', // 关键词
  [116.397428, 39.90923], // 中心点坐标（天安门）
  1000, // 半径（1000米）
  (status, result) => {
    if (status === 'complete') {
      console.log('周边POI：', result.poiList.pois);
    }
  }
);

（3）区域查询（多边形范围内）

在自定义多边形区域内搜索 POI（如 “北京某商圈内的超市”）：

javascript

运行

// 定义多边形顶点坐标（示例：北京某矩形区域）
const polygonPoints = [
  [116.35, 39.91],
  [116.40, 39.91],
  [116.40, 39.94],
  [116.35, 39.94]
];

// 区域搜索：关键词+多边形边界
placeSearch.searchInBounds(
  '超市', // 关键词
  new AMap.Bounds(polygonPoints), // 多边形边界
  (status, result) => {
    if (status === 'complete') {
      console.log('区域内POI：', result.poiList.pois);
    }
  }
);

（4）POI 详情查询（获取电话、营业时间等）

通过 POI 的唯一 ID 查询详细信息：

javascript

运行

// 从搜索结果中获取POI的id（示例ID）
const poiId = 'B000A83M61'; 

// 查询详情
placeSearch.getDetails(poiId, (status, result) => {
  if (status === 'complete') {
    const detail = result.poiDetail;
    console.log('详细信息：', {
      名称: detail.name,
      电话: detail.tel,
      营业时间: detail.openingHours,
      类型: detail.type,
      评分: detail.rating // 部分POI有评分
    });
  }
});