小程序地图与位置服务（LBS）实战

<map
  id="mainMap"
  class="map"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  scale="16"
  markers="{{markers}}"
  polyline="{{polyline}}"
  show-location
  enable-zoom
  enable-scroll
  enable-rotate="{{false}}"
  bindmarkertap="onMarkerTap"
  bindcallouttap="onCalloutTap"
  bindregionchange="onRegionChange"
/>

wx.getLocation({
  type: 'gcj02',                 // wgs84 或 gcj02，国内地图必须用 gcj02
  isHighAccuracy: true,          // 开启高精度定位
  highAccuracyExpireTime: 4000,  // 超时后降级返回当前结果
  success: (res) => console.log(res.latitude, res.longitude, res.accuracy),
  fail: (err) => handleLocationFail(err)
});

// utils/coord.js
const PI = Math.PI;
const A = 6378245.0;                 // 长半轴
const EE = 0.00669342162296594323;   // 偏心率平方

// 经纬度偏移量（GCJ-02 加密核心）
function delta(lng, lat) {
  let dLat = -100 + 2 * lng + 3 * lat + 0.2 * lat * lat + 0.1 * lng * lat
    + 0.2 * Math.sqrt(Math.abs(lng));
  dLat += (20 * Math.sin(6 * lng * PI) + 20 * Math.sin(2 * lng * PI)) * 2 / 3;
  dLat += (20 * Math.sin(lat * PI) + 40 * Math.sin(lat / 3 * PI)) * 2 / 3;
  dLat += (160 * Math.sin(lat / 12 * PI) + 320 * Math.sin(lat * PI / 30)) * 2 / 3;

  let dLng = 300 + lng + 2 * lat + 0.1 * lng * lng + 0.1 * lng * lat
    + 0.1 * Math.sqrt(Math.abs(lng));
  dLng += (20 * Math.sin(6 * lng * PI) + 20 * Math.sin(2 * lng * PI)) * 2 / 3;
  dLng += (20 * Math.sin(lng * PI) + 40 * Math.sin(lng / 3 * PI)) * 2 / 3;
  dLng += (150 * Math.sin(lng / 12 * PI) + 300 * Math.sin(lng / 30 * PI)) * 2 / 3;

  const radLat = lat / 180 * PI;
  let magic = Math.sin(radLat);
  magic = 1 - EE * magic * magic;
  const sqrtMagic = Math.sqrt(magic);
  return [
    (dLng * 180) / (A / sqrtMagic * Math.cos(radLat) * PI),
    (dLat * 180) / ((A * (1 - EE)) / (magic * sqrtMagic) * PI)
  ];
}

// WGS84 -> GCJ-02
function wgs84ToGcj02(lng, lat) {
  // 境外不偏移，直接返回原始坐标
  if (lng < 72.004 || lng > 137.8347 || lat < 0.8293 || lat > 55.8271) return [lng, lat];
  const [dLng, dLat] = delta(lng - 105, lat - 35);
  return [lng + dLng, lat + dLat];
}

// GCJ-02 -> WGS84（反向近似，精度足够业务使用）
function gcj02ToWgs84(lng, lat) {
  const [gLng, gLat] = wgs84ToGcj02(lng, lat);
  return [lng * 2 - gLng, lat * 2 - gLat];
}

const markers = [{
  id: 1,
  latitude: 39.908823,
  longitude: 116.397470,
  width: 32,
  height: 32,
  iconPath: '/assets/marker-shop.png',
  anchor: { x: 0.5, y: 1 },   // 锚点在图标底部中心
  callout: {
    content: '门店 A\n营业中',
    color: '#323233',
    fontSize: 13,
    borderRadius: 8,
    bgColor: '#ffffff',
    display: 'BYCLICK'        // ALWAYS | BYCLICK
  },
  label: { content: '门店 A', color: '#1989fa', fontSize: 12, anchorX: -24, anchorY: -48 }
}];

<map id="mainMap" markers="{{markers}}" bindmarkertap="onMarkerTap">
  <cover-view slot="callout">
    <cover-view
      wx:for="{{markers}}"
      wx:key="id"
      marker-id="{{item.id}}"
      class="custom-callout"
    >
      <cover-view class="title">{{item.name}}</cover-view>
      <cover-view class="desc">距离 {{item.distance}} 米</cover-view>
    </cover-view>
  </cover-view>
</map>

// 球面距离（Haversine 公式），返回米
function distance(lat1, lng1, lat2, lng2) {
  const R = 6371008.8;   // 地球平均半径，米
  const rad = Math.PI / 180;
  const dLat = (lat2 - lat1) * rad;
  const dLng = (lng2 - lng1) * rad;

  const a = Math.sin(dLat / 2) ** 2
    + Math.cos(lat1 * rad) * Math.cos(lat2 * rad) * Math.sin(dLng / 2) ** 2;
  return 2 * R * Math.asin(Math.sqrt(a));
}

async function planDriving(from, to) {
  const url = 'https://apis.map.qq.com/ws/direction/v1/driving/'
    + `?from=${from.latitude},${from.longitude}&to=${to.latitude},${to.longitude}`
    + `&key=${MAP_KEY}&output=json`;

  const res = await promisify(wx.request)({ url, method: 'GET' });
  if (res.data.status !== 0) throw new Error(`路线规划失败: ${res.data.message}`);

  const route = res.data.result.routes[0];
  // route.distance 单位米，route.duration 单位秒
  // route.polyline 是压缩坐标串，需按每 8 个字符表示一个坐标增量的规则解压后再上图
  return { distance: route.distance, duration: route.duration, polyline: route.polyline };
}

wx.openLocation({
  latitude: lat, longitude: lng, name: '门店 A',
  address: '北京市东城区某路 1 号', scale: 18,
  fail: () => {
    // 兜底：唤起腾讯地图小程序
    wx.openEmbeddedMiniProgram({ appId: 'wx76a9a06e5b4e693e', path: `pages/index/index?lat=${lat}&lng=${lng}` });
  }
});

function checkGeofence(current, fence) {
  const d = distance(current.latitude, current.longitude, fence.latitude, fence.longitude);
  // 定位精度会带来误差，判定半径要留出余量
  return { inside: d <= fence.radius + 50, distance: d };
}

async function punchIn(fenceId) {
  const loc = await promisify(wx.getLocation)({
    type: 'gcj02', isHighAccuracy: true, highAccuracyExpireTime: 5000
  });

  // 精度太差时先提示，避免无意义的服务端请求
  if (loc.accuracy > 200) {
    wx.showToast({ title: '定位精度不足，请到开阔处重试', icon: 'none' });
    return;
  }

  const res = await request({
    url: '/api/checkin',
    method: 'POST',
    // accuracy 供服务端判断是否为模拟定位
    data: { fenceId, latitude: loc.latitude, longitude: loc.longitude, accuracy: loc.accuracy, timestamp: Date.now() }
  });
  wx.showToast({ title: res.code === 0 ? '打卡成功' : res.message, icon: res.code === 0 ? 'success' : 'none' });
}

function buildPolyline(points) {
  return [{
    points: points.map((p) => ({ latitude: p.latitude, longitude: p.longitude })),
    color: '#1989faCC',     // 支持 8 位十六进制带透明度
    width: 6,
    arrowLine: true,
    borderColor: '#ffffff'
  }];
}

// 用 moveAlong 让标记沿路径移动，比定时 setData 平滑得多
const ctx = wx.createMapContext('mainMap', this);
ctx.moveAlong({
  markerId: 1,
  path: points.map((p) => ({ latitude: p.latitude, longitude: p.longitude })),
  duration: 10000,          // 整条路径的总时长，单位毫秒
  fail: (err) => console.error('回放失败', err)
});

// app.json
{
  "requiredPrivateInfos": ["getLocation", "chooseLocation", "startLocationUpdate", "onLocationChange"],
  "requiredBackgroundModes": ["location"]
}