地图组件怎么用

地图是小程序里很常用的一个组件，外卖、出行、找店、签到这些场景都离不开它。用起来也不难：在页面里放一个 map 标签，给定经纬度和缩放级别，地图就渲染出来了。

map 组件默认占满容器，可以设置 latitude、longitude 控制中心点，scale 控制缩放级别。要在地图上画点，就用 markers 传一组标记，每个标记带上 id、经纬度和气泡标题。

使用前记得先在后台开通地图相关的权限并申请密钥，不同平台的 key 不能混用。调不通的，八成是 key 配错或者服务没开通。

本文核心知识点
  • 地图map 组件与标记。
  • 定位授权与精度选择。
  • 周边搜索与距离排序。
  • 性能低频定位与页面回收。
小程序地图与位置服务配图：蓝调渐变背景上地图定位标记、经纬网格与周边气泡的扁平科技插画
地图组件加上定位能力，就能撑起一堆位置相关的业务。

定位与授权

拿到用户位置，通常用 wx.getLocation。第一次调用会触发授权弹窗，用户拒绝之后就再也拿不到位置，所以要先问清楚用途，别在用户没预期的时候弹。

wx.getLocation({
  type: 'gcj02',
  isHighAccuracy: true,
  success: function (res) {
    var lat = res.latitude;
    var lng = res.longitude;
  }
});

type 用 gcj02，这是国内坐标系，和地图厂商的坐标一致，直接用就行。isHighAccuracy 会走更高精度的定位，但更费电，后台运行或者只需要大概范围的时候关掉它。

另外，定位失败要准备兜底：用户拒绝授权、在室内、开飞行模式，都要有对应的提示和降级方案，别让整个页面卡死在「加载中」。

标记与周边搜索

地图上要展示的门店、车辆、工单，都可以用 markers 渲染。点标记弹出详情，用 bindmarkertap 事件绑定点击。

<map latitude="lat" longitude="lng" markers="markers"
     bindmarkertap="onMarkerTap" scale="14">
</map>

周边搜索一般走后端：前端把经纬度传给服务端，服务端调地图服务商的 POI 搜索接口，把附近的店算好再返回。不要把密钥放在前端，搜索逻辑放在服务端更安全。

搜索接口一般支持按分类过滤，比如餐饮、酒店、加油站。返回结果要按距离排序展示，距离近的排前面，用户看着才直观。

距离计算与排序

两点之间算距离，别自己在端上写球面公式，地图服务商都提供距离计算接口，直接调就行。数据量大时在服务端批量算好，再连同列表一起返回。

场景精度频率
找附近门店几百米进页面一次
路线导航高精度持续低频
后台打卡低精度定时低频

排序时注意把「距离」和「热度」一起考虑，纯按距离排会把热门店压到后面。加权公式可以做成服务端配置，运营想调就调，不用发版。

列表和地图建议联动：点列表里的店，地图上的标记高亮并移动视野；拖动地图，列表跟着换成当前区域的结果。两边状态同步好，用户就不会觉得地图是地图、列表是列表，体验会顺很多。

性能与电量

地图组件本身比较重，页面里能放一个就放一个。需要持续定位的场景，记得在页面隐藏或者退出时把定位监听停掉，不然耗电很厉害。

定位是按需的，不是常驻的。用户离开页面，就该把监听收掉。

markers 数量也别一次塞太多，几百个标记同时渲染会卡。先按当前视野裁剪，只画看得见的区域，滚动地图时再增量更新。

另外，地图相关的页面在 iOS 和安卓上的表现有差异，真机测试要两台都跑一遍。特别是地图全屏覆盖原生导航栏这类细节，模拟器看不出来，只有真机才暴露问题。

隐私方面也要讲清楚：用户授权位置是有理由的，弹窗文案把用途写明白，比如「用于查找附近门店」。用户拒绝之后再次询问要克制，给一个手动开启入口就好，别反复弹。