简介：高德地图绘制是一份面向GIS开发、前端工程师及移动应用开发初学者的实例资源，围绕高德地图JavaScript API讲解驾车与步行线路的绘制流程，涵盖密钥申请、地图初始化、路线规划、Polyline绘制以及Marker标注等核心环节。压缩包共0个文件，压缩包大小约12.01MB，以代码示例与说明文档为主要内容，便于按步骤对照实现基础地图应用，也可在此基础上扩展途经点、动态更新与实时路况等高级功能。该资源已有866人浏览学习，内容强调从零到一的完整实现思路，适合希望快速掌握高德地图路线绘制并理解API调用过程的开发者。
1. 高德地图绘制：从一张底图到可交互的绘制能力
很多人以为“高德地图绘制”就是把地图铺到页面上，再往上丢几个点。真正做起来才发现，画一条轨迹、圈一块区域、让标记物跟着数据动起来，背后牵扯坐标体系、覆盖物生命周期、渲染性能和一整套交互设计。我见过不少团队在地图选型时拍板“就高德了”，结果开发到一半卡在绘制层，不是线画不出来，就是多边形编辑后数据不对，最后只能返工。这篇文章想讲的，不是高德地图怎么“看”，而是怎么“画”——把点、线、面、轨迹、边界这些高频绘制需求拆开，讲清楚原理、参数和坑，让新手照着能落地，让熟手能避开我踩过的雷。
这套能力适合谁？前端工程师要在地图上做业务标注、轨迹回放、区域选择；数据可视化同学要叠加自定义图层；后端同学要理解前端提交的坐标数据为什么和自己存的不一样。核心就一句话：高德地图绘制不是调一个方法就完事，而是从坐标系到覆盖物再到事件交互的一整条链路。
2. 高德地图绘制的基础选型：JS API 2.0 与覆盖物体系
2.1 为什么要用 JS API 2.0，而不是继续用 1.4
高德地图 Web 端能力目前常见的是 JS API 1.4 和 2.0 两个版本。虽然 1.4 稳定且资料多，但新项目我一般建议直接上 2.0。原因有三条。
第一是渲染引擎差异。2.0 默认走 WebGL 渲染，对 Canvas 的利用更彻底，绘制大量 Marker 和 Polygon 时性能明显好于 1.4 的 DOM 拼接方案。某开发者在做一个模拟项目X时，用 1.4 绘制 2000 个点，拖动地图明显掉帧，切到 2.0 后流畅度提升了一个档次。
第二是加载方式更现代。1.4 只能通过 script 标签全局引入，2.0 支持 npm 包@amap/amap-jsapi-loader，可以在 Vue 或 React 项目里按需加载，避免全局变量污染，也方便构建工具统一管理。依赖管理更干净。
第三是覆盖物 API 更规范。2.0 对 Marker、Polyline、Polygon 的属性和事件做了收敛，方法的命名更一致，比如setPath、getPath在 1.4 里行为有差异，2.0 里统一了。踩过 1.4 坑的人应该懂，同一个方法在不同子版本里参数格式不一致有多头疼。
当然 1.4 不是不能用。如果项目维护的是老系统，地图能力只是展示几个固定点，升级成本大于收益，那就继续用。但如果是从零开始，直接选 2.0，别给自己埋技术债。
2.2 覆盖物体系：Marker、Polyline、Polygon 的适用边界
高德地图绘制核心是覆盖物（Overlay），它指所有叠加在地图上的可绘制对象。常用的有四类：Marker、Polyline、Polygon 和 Circle。
Marker 是点标记，适合表达“某个位置有什么”。它承载的信息最丰富，可以自定义图标、文本、气泡内容，还能绑定点击事件。业务里的门店标注、设备定位、车辆当前位置，都用 Marker。
Polyline 是折线，表达“走过的路”或“路径规划”。它适合画轨迹、管线、道路连线。注意 Polyline 也可以设置线型和颜色，但没有填充面积的概念。如果你用 Polyline 画了一个闭合形状，它不会形成区域。
Polygon 是多边形，表达“一块区域”。它既可以画规则矩形，也能画任意行政边界，支持填充色和边框，还能绑定鼠标事件。常见的电子围栏、区域热力范围、地块划分，用 Polygon。
Circle 是圆，本质上是 Polygon 的简化版，只需要圆心和半径。如果业务里就是“五公里范围内的店”，用 Circle 比 Polygon 更高效，不需要自己算坐标。
选型上的经验是：点用 Marker，路径用 Polyline，区域用 Polygon，规则半径用 Circle。不要试图用 Polyline 模拟区域，也不要用 Polygon 去画一条不闭合的路径，语义错了后面做数据处理会非常别扭。
2.3 初始化地图的最小代码与安全密钥配置
画任何东西之前，得先有一张能加载出来的底图。高德 JS API 2.0 的初始化并不复杂，配置正确后十几行代码就能跑通。下面是一个最小可用的初始化写法。
// 使用官方提供的 JSAPI Loader 按需加载 import AMapLoader from '@amap/amap-jsapi-loader'; window._AMapSecurityConfig = { // 安全密钥由后端代理接口动态获取，前端不要硬编码 securityJsCode: 'your_security_code', }; async function initMap() { const AMap = await AMapLoader.load({ key: 'your_amap_key', // 在高德开放平台申请的 Web 端 key version: '2.0', // 指定版本 plugins: ['AMap.MouseTool'], // 按需加载绘制插件 }); const map = new AMap.Map('mapContainer', { zoom: 12, // 初始缩放级别 center: [116.397428, 39.90923], // 初始中心点，注意是经纬度数组 viewMode: '2D', // 2D 或 3D }); return map; }这段代码有三个关键点。key是在高德开放平台申请的，属于公共标识，但securityJsCode必须由你自己的后端接口下发，不能在代码里写死，否则容易被盗用。plugins数组按需加载插件，这里把AMap.MouseTool显式加载了，后面绘制要用。center的坐标格式是[经度, 纬度]，这是高德整个 API 的统一约定，后面所有路径数据都遵循这个顺序。
初始化完成后，可以先用一个空的 Marker 验证地图是否真的加载成功。如果地图容器白屏，优先检查 key 是否有效、安全密钥是否正确、容器是否有高度，这三个问题是地图初始化阶段出现频率最高的，具体排查思路在第五章展开。
3. 高德地图绘制核心操作：点、线、面的绘制与编辑
3.1 绘制 Marker 并绑定交互事件
Marker 是最简单的覆盖物，但业务对它的需求往往不只是“显示”这么简单。实际场景里，Marker 要能自定义图标、要能响应点击、要能在数据变化时更新位置。下面是一个带事件的 Marker 创建示例。
function addMarker(map, position, info) { const marker = new AMap.Marker({ position: position, // 必传，经纬度数组 [lng, lat] anchor: 'bottom-center', // 图标锚点，控制图标哪个位置对准坐标 icon: new AMap.Icon({ size: new AMap.Size(30, 30), image: 'https://example.com/pin.png', imageSize: new AMap.Size(30, 30), }), title: info.name, // 鼠标悬停时的提示 }); marker.on('click', () => { // 点击后打开信息窗体 const infoWindow = new AMap.InfoWindow({ content: `<div>${info.name}</div><div>${info.address}</div>`, offset: new AMap.Pixel(0, -30), }); infoWindow.open(map, marker.getPosition()); }); map.add(marker); return marker; }这里容易被忽略的是anchor。Marker 默认锚点在图标中心，但很多设计稿里的图标是尖头朝下的，比如地图定位针，这时锚点应该设成bottom-center，否则图标底部和坐标位置永远对不齐，缩放到大级别时偏差明显。icon里的size和imageSize如果不一致，图标会被拉伸变形，这是一个非常隐蔽的显示问题。
Marker 的位置更新也是一个高频需求，比如车辆移动。不要每次创建新 Marker，而是先创建一次，之后调用marker.setPosition(newPos)更新位置，能显著减少 DOM 操作带来的性能损耗。
3.2 用 Polyline 绘制轨迹并设置样式
画轨迹是物流、出行、巡检类项目的基本功。Polyline 的核心是path属性，它是一个经纬度数组的数组。下面实现一段带箭头的轨迹绘制。
// 模拟一段轨迹坐标 const trackPath = [ [116.397428, 39.90923], [116.398512, 39.90976], [116.400102, 39.91005], [116.402331, 39.90984], [116.404482, 39.90912], ]; const polyline = new AMap.Polyline({ path: trackPath, strokeColor: '#3366FF', strokeWeight: 6, strokeOpacity: 0.8, strokeStyle: 'solid', lineJoin: 'round', // 拐角样式，round 让折线转折处更平滑 lineCap: 'round', // 端点样式，避免端点出现难看的直角 showDir: true, // 显示方向箭头 zIndex: 50, // 控制覆盖物层级，防止被其他图形盖住 }); map.add(polyline);轨迹绘制里最容易翻车的是路径点过于密集或过于稀疏。点太密，折线会出现锯齿感，渲染压力也大；点太疏，轨迹会切掉弯道，看着不像真实路线。常见做法是先对原始 GPS 轨迹做抽稀，比如保留间隔 5 米以上的点，再交给 Polyline。高德本身也提供了AMap.GeometryUtil.isClockwise这类工具，但抽稀要自己处理。
另一个细节是zIndex。如果页面同时画了轨迹和区域框，不设zIndex时后添加的覆盖物会盖在先添加的上方，但某些浏览器下渲染顺序并不稳定。显式设置zIndex是最可靠的方式。
3.3 用 Polygon 绘制区域并实现面积计算
Polygon 是绘制电子围栏、地块选择的常用覆盖物。它和 Polyline 的语法很像，但多了一个“面”的概念。下面是一个带面积计算的多边形示例。
const polygon = new AMap.Polygon({ path: [ [116.401102, 39.90784], [116.405482, 39.90712], [116.408331, 39.90984], [116.404482, 39.91112], ], fillColor: '#ff8800', fillOpacity: 0.35, strokeColor: '#bb4400', strokeWeight: 2, }); map.add(polygon); // 在鼠标绘制完成后计算面积 polygon.on('mouseover', () => { const area = AMap.GeometryUtil.ringArea( polygon.getPath() ); console.log('多边形面积（平方米）:', area); });AMap.GeometryUtil.ringArea返回的是平方米，如果要展示“亩”或“公顷”需要自己换算。注意这个方法要求传入的路径是闭合的，而polygon.getPath()返回的路径首尾坐标可能并不完全相等，但高德内部会按闭合形状处理，直接传入即可。
如果业务里需要让用户手动画区域，可以结合AMap.MouseTool的polygon模式。用户画完后，通过监听draw事件拿到完整的路径数据，再存入后端。
const mouseTool = new AMap.MouseTool(map); mouseTool.polygon({ fillColor: '#00baff', strokeColor: '#0086d1', }); mouseTool.on('draw', (event) => { const drawnPath = event.obj.getPath(); map.remove(event.obj); // 画完先移除临时图形 // 将 drawnPath 转成 JSON 存储或做后续编辑 console.log(JSON.stringify(drawnPath)); });这里要注意一个常见误用：mouseTool.on('draw')拿到的event.obj是绘制完成的覆盖物对象，如果你直接把它留在画面上，后面用户再画新的会叠加。我一般会在拿到路径数据后立刻把临时绘制的 Polygon 移出地图，再由业务层决定是否重新添加一个带正式样式的覆盖物。这样能避免“画一次叠一层”的翻车现场。
3.4 开启鼠标绘制工具 mouseTool 的几种姿势
AMap.MouseTool是绘制交互的核心插件，支持画点、画线、画多边形、画圆、画矩形。它在 2.0 里需要显式在plugins中声明，否则new AMap.MouseTool会直接报错。
实际项目中，用户绘制需求往往需要做模式切换。我维护的某跨平台系统里，左侧工具栏有三个按钮：画区域、画线、清除。对应的切换逻辑很简单，但有一个坑，就是MouseTool一旦开启绘制模式，地图的拖拽和缩放会被屏蔽。如果用户中途想移动地图，必须手动关闭绘制模式。
// 关闭当前绘制模式 mouseTool.close(true); // 参数 true 表示关闭后移除绘制中的临时图形 // 切换到画多边形 mouseTool.polygon(); // 切换到画折线 mouseTool.polyline({ strokeColor: '#3366FF', strokeWeight: 4, });close(true)这个参数很容易被忽略。默认关闭时，正在画一半的图形会残留在地图上，用户再次开启绘制时会被这些半成品干扰。传true后，未完成的临时图形会被清理掉。这个小细节，能省掉很多交互上的返工。
4. 高德地图绘制的进阶场景：轨迹回放与行政区域边界
4.1 轨迹回放：从坐标数组到动画的实现思路
轨迹回放是物流运单、外勤打卡、体育轨迹场景的高频需求。核心思路不是让 Polyline 播放，而是用一个 Marker 沿着 Polyline 的路径移动，同时让视野跟随。高德提供了AMap.Marker的moveAlong方法，这比自己用定时器循环设置位置靠谱得多，因为动画帧率由地图引擎控制，不会因为页面卡顿而跳点。
function playTrack(map, trackPath) { const startPoint = trackPath[0]; const marker = new AMap.Marker({ position: startPoint, icon: new AMap.Icon({ size: new AMap.Size(24, 24), image: 'https://example.com/car.png', }), }); map.add(marker); map.setFitView([marker]); // 沿轨迹移动，速度为 300 公里/小时（示意参数，按业务调整） marker.moveAlong(trackPath, { duration: 5000, // 毫秒，整个轨迹播放时长 autoRotation: true, // 根据路径方向自动旋转图标 }); // 轨迹播放完成事件 marker.on('movealong', () => { console.log('轨迹播放完成'); }); }duration是整条轨迹的总播放时长。很多开发者会踩的坑是：路径点数量不同，但希望视觉速度一致，那么duration应按路径总长度算，而不是固定写死。比如路径总长 2 公里设 10 秒，另一条路径总长 20 公里也设 10 秒，视觉上速度差十倍，非常失真。
autoRotation只有当你使用的图标本身有方向性时才需要，比如箭头上朝上的车辆图标。如果图标是圆形的点，开启旋转反而显得莫名其妙。另外，轨迹回放时建议先隐藏轨迹线，等播放完成再显示线，否则线先画好、点再跑，视觉割裂。
4.2 行政区域边界：利用 DistrictSearch 获取边界坐标
有些需求要绘制整个城市的边界，比如“某区的数据分布图”。如果你手工收集坐标，一是数据不准，二是行政边界会随区划调整变化。更稳的方案是利用高德的AMap.DistrictSearch插件获取区域边界坐标，再构造 Polygon。
function drawDistrict(map, cityName) { const districtSearch = new AMap.DistrictSearch({ level: 'district', // 省级 province、市级 city、区级 district subdistrict: 0, // 不返回下级行政区 extensions: 'all', // 返回边界坐标 }); districtSearch.search(cityName, (status, result) => { if (status === 'complete' && result.districts.length > 0) { const bounds = result.districts[0].boundaries; // boundaries 是一个二维数组，每个元素代表一块独立区域 // 一个城市可能由多个不相连的面组成（如包含岛屿） bounds.forEach((path) => { const polygon = new AMap.Polygon({ path: path, strokeColor: '#0088ff', strokeWeight: 1, fillColor: '#0088ff', fillOpacity: 0.15, }); map.add(polygon); }); map.setFitView(); } }); }需要注意boundaries是数组的数组。这一点很容易忽略——中国多数城市的主城区是一块连续区域，但一些沿海城市有岛屿，或者区划上包含飞地，这时返回的就是多条独立边界。如果你只取boundaries[0]，画出来的区域会缺一块。我的习惯是先判断boundaries.length，如果大于 1，就循环全部添加。
4.3 海量点绘制：点聚合与性能取舍
当业务数据量到上万级别，直接 add 一万个 Marker 是不现实的。地图渲染扛不住，用户交互也会卡顿。常见做法是点聚合（Cluster），把相邻的点合并成一个聚合标记，缩放时再裂开。高德提供AMap.MarkerClusterer插件。
import MarkerClusterer from '@amap/amap-jsapi-loader'; // 实际通过 plugins 引入 const clusterer = new AMap.MarkerClusterer(map, markersList, { gridSize: 80, // 聚合网格像素大小，越小越容易聚合 maxZoom: 18, // 超过该缩放级别不聚合，显示原始点 renderClusterMarker: (cluster) => { // 自定义聚合点样式 const count = cluster.getCount(); const div = document.createElement('div'); div.className = 'cluster-marker'; div.innerHTML = count; return div; }, });gridSize是最常用的调节参数。调小，聚合更密集，远看就是一坨点；调大，聚合更分散，近看会提前裂开。我通常从 80 开始调，然后按实际数据分布微调。
还有一个经验：点聚合只解决渲染数量问题，不解决“点到信息”的映射问题。点击聚合点，你要自己计算它代表哪些原始数据。一般做法是在renderClusterMarker里把聚合包含的原始点数据绑定到 DOM 上，或者用一个 Map 结构在外层维护 clusterId 到原始点的映射。
5. 高德地图绘制的避坑与排查：五个高频翻车现场
5.1 地图容器高度为 0，白屏怎么查
现象：页面加载后地图区域一片空白，控制台没有任何报错，或者只有一句“container not found”。
原因：高德地图的 Map 实例会尝试获取传入容器 DOM 的宽高，如果 CSS 没有给该元素设置明确的height，很多浏览器下计算结果是 0，地图渲染不出来。这个问题在前后端分离的项目里尤其常见，因为组件挂载时序和 CSS 加载顺序不一致。
解决：先在 CSS 中给地图容器设置固定高度，比如#mapContainer { height: 600px; }，确认地图能显示后再改成百分比或视口高度。如果是 Vue/React 组件，确保地图初始化代码在 DOM 渲染完成后执行，常见做法是在mounted或useEffect里初始化，且不要写v-if控制容器显示。
5.2 安全密钥配置导致地图加载失败
现象：AMapLoader.load报错，错误信息类似INVALID_USER_KEY或USER_KEY_PLAT_NOMATCH，但对照开放平台配置感觉都对。
原因：JS API 2.0 除了要配置key，还必须设置安全密钥。高德官方要求安全密钥不能直接暴露在浏览器端，需要由你的后端服务调用接口换取。但很多开发者在本地调试时图省事，把securityJsCode直接写在前端代码里，或者干脆没配置。
解决：在全局配置window._AMapSecurityConfig.securityJsCode时确认它来自后端接口。本地调试可以先用后端代理下发，不要硬编码在前端仓库里。如果只是临时联调，也可以在后端服务里配置高德提供的安全密钥代理方案，前端无感知。注意：不同域名需要校验，前后端环境不一致时会踩这个错。
5.3 覆盖物坐标偏移：GCJ-02 与 WGS-84 的换算问题
现象：导入一批设备上报的 GPS 坐标，落到高德地图上偏了几百米，有的甚至偏移到隔壁街道。
原因：设备拿到的是 WGS-84 坐标系坐标，而高德地图在国内使用 GCJ-02 加密坐标系。两种坐标系之间存在非线性偏移，直接拿原始坐标绘制必然不准。这不是高德的 bug，而是规范层面的差异。
解决：在覆盖物传给地图之前完成坐标转换。常见做法是使用系统自带定位时请求高德的定位 SDK，它返回的坐标已经是 GCJ-02。如果是三方设备数据，需要在前置服务里完成坐标转换，再下发到前端。前端也可以引入转换库，但转换逻辑放在后端更统一，避免多端代码不一致。坐标转换不是一劳永逸的，逆转换存在一定精度损耗，对精度要求高的场景尽量从源头拿到 GCJ-02 坐标。
5.4 绘制轨迹时线段消失或断线
现象：Polyline 添加后不显示，或者显示到一半突然断开，移动地图后又恢复。
原因：最常见的原因是path数据里出现了非法坐标，比如null、undefined或越界值。另一个隐藏原因是路径点顺序写反了，把[lat, lng]当成了[lng, lat]，两三个点的时候可能碰巧显示，点多之后轨迹就乱飞或消失。
解决：在 add 之前先做一次数据清洗。遍历路径数组，过滤掉非数字或超出经纬度范围的元素。同时自己定一个打印函数，把path的首尾几个点输出，肉眼确认纬度在前还是经度在前。还有一个排查技巧：用map.setFitView()让地图自动缩放到覆盖物的包围盒，如果线确实添加成功，视野会跳过去。
5.5 聚合点事件丢失，点击无反应
现象：用 MarkerClusterer 聚合后，点击聚合点没有任何响应，但放大后点击单个 Marker 是正常的。
原因：聚合点的事件绑定方式和普通 Marker 不一样。MarkerClusterer 生成聚合节点时会替换掉原有 Marker 的 DOM 结构，事件监听如果绑定在原始 Marker 上就丢了。
解决：采用renderClusterMarker返回自定义 DOM 的方式，在 DOM 上绑定事件。同时不要用marker.on('click')去监听聚合节点，要监听clusterer.on('click')，通过cluster.getMarkers()拿到聚合包含的原始 Marker 列表。如果需要展示聚合点的信息，比如“范围内共有 35 条记录”，可以维护一个 clusterId 到数据的散列表。
6. 高德地图绘制的进阶技巧：把绘制结果导出成标准数据
绘制完成只是第一步，真正让地图能力产生价值的，是绘制结果能被业务系统消费。我的习惯是，所有覆盖物数据统一收敛成 GeoJSON 格式，这样不管是存入数据库，还是交给后端做空间计算，都有标准范式。
function overlayToGeoJSON(overlay) { if (overlay instanceof AMap.Marker) { const pos = overlay.getPosition(); return { type: 'Feature', geometry: { type: 'Point', coordinates: [pos.lng, pos.lat], }, properties: overlay.getExtData(), // 业务数据挂在扩展属性上 }; } if (overlay instanceof AMap.Polygon) { const path = overlay.getPath(); return { type: 'Feature', geometry: { type: 'Polygon', coordinates: [path.map(p => [p.lng, p.lat])], }, properties: overlay.getExtData(), }; } if (overlay instanceof AMap.Polyline) { const path = overlay.getPath(); return { type: 'Feature', geometry: { type: 'LineString', coordinates: path.map(p => [p.lng, p.lat]), }, properties: overlay.getExtData(), }; } return null; }这段代码核心是getPath()和getPosition()的返回值。它们返回的不是普通数组，而是包含lng、lat属性的对象，转成 GeoJSON 时必须显式取出。另一个小技巧是setExtData，它可以在覆盖物上挂任意业务数据，比如设备 ID、名称、状态，导出时一并带走。很多团队就是漏掉了这一步，绘制结果和业务数据对不上，后续处理非常痛苦。
验证导出的数据是否可用，我通常会做一个测试：把 GeoJSON 内容丢到任意支持空间数据展示的在线工具里，看形状是否和地图上画的一致。如果点、线、面的形状都吻合，说明坐标顺序和数据结构没问题。然后用后端接口把这个 GeoJSON 存入数据库，再写一个查询接口把数据取出来重新渲染回高德地图。来回一次，整个链路的正确性就有保证了。
之前接手一个某图像处理Demo的迁移，老系统直接把高德覆盖物 path 序列化存库，后来要换成别的底图，数据全部作废。那次的教训让我养成了统一转 GeoJSON 的习惯。高德绘制只是起点，数据和坐标系才是核心资产。希望这个技巧能帮你在绘制之外，把数据这层地基也打牢，后面换底图、上空间分析，都有退路。希望帮到你。
本文还有配套的精品资源，点击获取
