2、地图基础：map组件的使用、设置中心点与缩放级别、地图类型切换

好，咱们正式开始聊地图开发。这一章是地基，地基打不牢，后面做轨迹、做导航都会出问题。我个人习惯是，不管多简单的功能，先把 map 组件的基本用法摸透，再往上堆业务逻辑。

2.1 认识 map 组件

小程序里的地图，核心就是 <map> 这个组件。它不像网页端用 JavaScript API 那么灵活，但胜在简单——你只需要在 wxml 里写一个标签，它就能渲染出一张可交互的地图。

最基本的写法长这样：

<map
  id="myMap"
  longitude="116.397128"
  latitude="39.916527"
  scale="14"
  style="width: 100%; height: 400px;"
/>

嗯，这里要注意：longitude 和 latitude 是必填的，否则地图会显示空白。我刚开始学的时候，忘了传经纬度，调试了半天才发现是数据没绑定上去。

2.2 设置中心点与缩放级别

地图的中心点，说白了就是地图打开时，屏幕正中间那个位置。缩放级别 scale 控制地图的精细程度，范围是 3 到 20。3 能看到整个中国，20 能看清你家楼下的便利店。

我在项目中遇到过一个问题：用户定位成功后，地图自动跳转到用户位置，但缩放级别设成了 18，结果用户看到的是一堆楼顶，完全不知道自己在哪里。后来我改成了 14，既能看清周边路网，又不至于太细碎。

动态设置中心点和缩放，一般用 wx.createMapContext 配合 moveToLocation 或 setCenterOffset：

const mapCtx = wx.createMapContext('myMap')

// 移动到当前定位点，并设置缩放
mapCtx.moveToLocation({
  latitude: 39.916527,
  longitude: 116.397128,
  scale: 15
})

你想想看，如果用户从北京切换到上海，总不能让他手动拖拽吧？用 moveToLocation 就能平滑过渡。不过要注意，这个 API 在 iOS 和 Android 上的动画效果略有差异，Android 上更顺滑一些。

2.3 地图类型切换：标准 / 卫星 / 3D

小程序地图支持三种类型，通过 type 属性控制：

类型	属性值	适用场景
标准地图	type="normal"	日常导航、POI 展示
卫星地图	type="satellite"	户外活动、地形查看
3D 地图	type="3D"	城市建筑展示、沉浸式体验

切换起来很简单，动态绑定 type 就行：

<map
  id="myMap"
  longitude="{{longitude}}"
  latitude="{{latitude}}"
  scale="{{scale}}"
  type="{{mapType}}"
  style="width: 100%; height: 400px;"
/>

// 切换逻辑
Page({
  data: {
    mapType: 'normal'
  },
  switchToSatellite() {
    this.setData({ mapType: 'satellite' })
  },
  switchTo3D() {
    this.setData({ mapType: '3D' })
  }
})

2.4 避坑指南

我曾经踩过一个坑：在 onLoad 里直接调用 moveToLocation，结果地图还没渲染完成，API 调用无效。后来我改成在 onReady 生命周期里操作，或者加一个 setTimeout 延迟 300 毫秒，问题就解决了。

还有一个容易忽略的点：scale 的值是整数，如果你传了小数，小程序会自动取整。但不同机型取整规则不一样，我建议你手动 Math.round() 一下，避免意外。

2.5 实战：做一个地图类型切换器

咱们把上面讲的东西串起来，写一个完整的小例子。用户打开页面，默认显示标准地图，点击按钮可以切换到卫星或 3D 模式。

<!-- wxml -->
<view class="container">
  <map
    id="myMap"
    longitude="116.397128"
    latitude="39.916527"
    scale="14"
    type="{{mapType}}"
    style="width: 100%; height: 500px;"
  />
  <view class="btn-group">
    <button bindtap="switchNormal">标准</button>
    <button bindtap="switchSatellite">卫星</button>
    <button bindtap="switch3D">3D</button>
  </view>
</view>

// js
Page({
  data: {
    mapType: 'normal'
  },
  switchNormal() {
    this.setData({ mapType: 'normal' })
  },
  switchSatellite() {
    this.setData({ mapType: 'satellite' })
  },
  switch3D() {
    this.setData({ mapType: '3D' })
  }
})

这个例子虽然简单，但涵盖了 map 组件的核心用法。你可以在真机上试试，卫星地图加载会慢一点，因为图片数据量大。3D 地图在建筑密集的区域效果特别棒，比如上海陆家嘴、北京国贸。

好了，这一章就到这里。下一章咱们会聊「定位与坐标转换」，到时候我会分享一个我在做外卖配送小程序时遇到的定位漂移问题，挺有意思的。