1. 初识地图：小程序地图组件介绍、腾讯地图与高德地图的选择、开发者账号注册与Key申请

大家好，我是你们这门课的老师。今天咱们正式进入地图与位置服务的世界。

说实话，我第一次在小程序里接入地图时，心里还挺没底的。那时候文档还不像现在这么全，踩了不少坑。不过别担心，我会把这些经验都揉碎了讲给你听。

这一章，我们先认识一下小程序里的地图组件，聊聊腾讯地图和高德地图怎么选，最后手把手带你注册账号、申请Key。嗯，这些都是基本功，但非常重要。

1.1 小程序地图组件：到底长什么样？

小程序官方提供了一个叫 <map> 的组件。说白了，它就是一块能显示地图的“画布”。你往上面丢坐标、画路线、加标记，它都能搞定。

我习惯把地图组件想象成一个“容器”。你只需要告诉它：

  • 你要显示哪个位置（经纬度）
  • 缩放级别是多少
  • 要不要显示指南针、比例尺

剩下的渲染工作，小程序帮你做了。来看一个最简单的例子：

<!-- index.wxml -->
<map
  id="myMap"
  longitude="116.397128"
  latitude="39.916527"
  scale="14"
  style="width: 100%; height: 300px;"
></map>

这段代码跑起来，你就能看到北京天安门附近的地图了。是不是很简单？

我的小习惯： 我一般会在 onReady 生命周期里通过 wx.createMapContext 获取地图实例。这样后续操作（比如移动视角、添加标记）会更灵活。

1.2 腾讯地图 vs 高德地图：到底选哪个？

这个问题，几乎每个初学者都会问。我当年也纠结过。

先给你一个结论：小程序官方推荐用腾讯地图。为什么？

  • 原生支持： 微信小程序底层用的是腾讯地图的数据。你用 <map> 组件，默认就是腾讯地图的瓦片。
  • 免Key： 如果你只用基础的地图显示、标记、路线规划，不需要申请Key。开箱即用。
  • 接口统一： 微信官方提供的 wx.getLocation、wx.chooseLocation 等API，和腾讯地图服务无缝对接。

那高德地图呢？它也有自己的优势：

  • POI数据更丰富： 在一些二三线城市，高德的兴趣点（比如餐馆、加油站）更新得更及时。我在项目里遇到过，用腾讯地图搜不到某个新开的商场，但高德能搜到。
  • JavaScript API 更成熟： 如果你要做复杂的自定义地图（比如热力图、轨迹回放），高德的JS API 文档和社区资源更丰富。

所以我的建议是：

场景 推荐地图 理由
基础地图显示、标记、路线 腾讯地图 免Key，原生支持，省心
需要丰富POI、自定义样式 高德地图 数据全，API灵活
商业项目、对稳定性要求高 腾讯地图 微信官方背书，兼容性好
需要Web端和小程序端统一 高德地图 JS API 和 小程序SDK 风格一致
注意： 如果你决定用高德地图，需要额外引入高德的小程序SDK，并且必须申请Key。而且，<map> 组件底层还是腾讯地图，你只是通过SDK调用高德的服务接口。说白了，地图显示还是腾讯的，但数据查询用的是高德的。

1.3 开发者账号注册与Key申请

好，假设你决定用腾讯地图（我猜大部分人会选这个）。那咱们来走一遍注册流程。

1.3.1 注册腾讯位置服务账号

打开 腾讯位置服务官网（注意，不是微信公众平台）。用你的微信扫码登录就行。我个人习惯用微信扫码，省得记密码。

登录后，进入控制台。你会看到一个“创建应用”的按钮。点它。

1.3.2 创建应用并申请Key

这里要注意几个关键点：

  • 应用名称： 随便填，比如“我的小程序地图”。
  • 应用类型： 选择“微信小程序”。
  • Bundle Identifier： 这里填你的小程序AppID。怎么找？在微信公众平台 -> 开发 -> 开发设置里就能看到。

填完之后，点击“添加Key”。系统会生成一串字符，比如 B5ABZ-XXXXX-YYYYY-ZZZZZ。这就是你的Key。

避坑指南： 我曾经犯过一个低级错误——把Key直接写死在代码里。后来项目上线，Key被人盗用，一天跑了十几万次请求，花了我不少钱。所以，Key一定要放在服务器端，或者通过云函数下发。小程序端只做展示，不做存储。

1.3.3 在小程序中配置Key

拿到Key之后，怎么用？有两种方式：

方式一：通过 app.json 全局配置

{
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
      "provider": "wxapp-xxxxx"
    }
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于地图定位"
    }
  }
}

这种方式适合使用腾讯地图官方插件。不过，对于基础地图组件，你其实不需要在 app.json 里配Key。

方式二：通过 wx.setStorageSync 或云函数下发

我推荐的做法是：在云函数里存储Key，小程序端调用云函数获取。这样Key不会暴露。

// 云函数：getMapKey
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()

exports.main = async (event, context) => {
  const res = await db.collection('config').doc('mapKey').get()
  return {
    key: res.data.key
  }
}

小程序端调用：

wx.cloud.callFunction({
  name: 'getMapKey',
  success: res => {
    const key = res.result.key
    // 接下来用这个key去调用腾讯地图的API
  }
})
核心要点： 无论你用哪种方式，记住一句话——Key是敏感信息，不要暴露在前端代码里。这是安全底线。

1.4 本章小结

这一章我们做了三件事：

  1. 认识了小程序的地图组件，知道它是个“容器”，能显示地图、标记、路线。
  2. 对比了腾讯地图和高德地图，明确了“基础功能用腾讯，高级功能看高德”的选择逻辑。
  3. 走了一遍注册账号、申请Key的流程，并且强调了Key的安全存储。

下一章，我们会真正动手写代码——获取用户位置、在地图上显示当前位置、添加标记点。嗯，那才是真正好玩的部分。

有什么问题，欢迎在评论区留言。咱们下章见。

← 上一章 📖 返回目录 下一章 →