保姆级教程：用Leaflet 1.6.0加载天地图卫星和路网（附完整代码和免费TK）

最新推荐文章于 2026-06-25 12:19:27 发布

原创

最新推荐文章于 2026-06-25 12:19:27 发布 · 626 阅读

收录于

当前文章被以下社区和专栏收录：

零基础实战：用Leaflet 1.6.0快速集成天地图卫星与路网服务

第一次接触WebGIS开发时，看着各类地图API文档总有种无从下手的感觉。直到发现Leaflet这个轻量级库，配合国内常用的天地图服务，竟能在20行代码内实现专业级地图展示。本文将手把手带你完成从TK申请到图层叠加的全流程，特别针对新手容易踩坑的 zoomOffset 参数、坐标系匹配等问题给出解决方案。

1. 环境准备与TK申请

天地图作为国内主流地图服务，要求开发者先申请密钥（Token，简称TK）。2023年最新申请流程已简化：

访问天地图官网注册开发者账号
进入控制台选择"创建应用"，应用类型选"浏览器端"
提交后系统自动生成TK字符串，形如 f3e86aa994f71465b1c56a98727

注意：测试阶段可直接使用示例中的临时TK，但正式项目务必申请个人密钥，免费额度完全够个人开发者使用。

基础HTML模板搭建：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Leaflet天地图集成</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
  <style>
    #map { width: 100vw; height: 100vh; }
  </style>
</head>
<body>
  <div id="map">

标签