微信小程序web-view + 百度地图H5 轨迹功能实现笔记

一、核心结论

微信小程序web-view 允许使用百度地图相关功能，但有明确规则限制：不能直接加载百度域名的链接（如https://api.map.baidu.com/...），需通过「自己备案的HTTPS域名H5页面」，在H5内引入百度地图JSAPI，实现轨迹（打卡点+连线）效果，小程序仅用web-view加载该H5即可。

二、整体实现流程（核心步骤）

准备百度地图AK：登录百度地图开放平台，创建「浏览器端」应用，设置安全码（开发阶段可填*，上线填自己的H5域名），获取AK（后续H5引入JSAPI需用到）。
开发H5地图页面：在自己的备案HTTPS域名下，创建map.html文件，引入百度地图JSAPI，编写Marker（打卡点）、Polyline（轨迹连线）逻辑，实现基础轨迹效果。
小程序端配置与开发：小程序页面用web-view组件加载自己域名的H5地址，配置小程序业务域名，完成小程序与H5的联动（可选传参）。

三、关键代码片段（可直接复用）

1. H5页面（map.html）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>地图打卡轨迹</title>
  <style>
    html, body { margin: 0; padding: 0; height: 100%; }
    #container { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <div id="container"></div>

  <!-- 引入百度地图JSAPI GL（替换成自己的AK） -->
  <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的百度AK"></script>
  <script>
    // 示例打卡点（可从小程序传递）
    const points = [
      { lng: 116.395, lat: 39.905, name: "景点1", num: 1 },
      { lng: 116.385, lat: 39.910, name: "景点2", num: 2 },
      { lng: 116.415, lat: 39.920, name: "景点3", num: 3 },
      { lng: 116.400, lat: 39.930, name: "景点4", num: 4 }
    ];

    // 初始化地图
    const map = new BMapGL.Map("container");
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 13);
    map.enableScrollWheelZoom(true);

    // 绘制轨迹连线（蓝色，与示例一致）
    const polylinePoints = points.map(p => new BMapGL.Point(p.lng, p.lat));
    const polyline = new BMapGL.Polyline(polylinePoints, {
      strokeColor: "#3377FF",
      strokeWeight: 6,
      strokeOpacity: 1
    });
    map.addOverlay(polyline);

    // 绘制打卡点（蓝色Marker）+ 序号（红色圆形标签）
    points.forEach(p => {
      const point = new BMapGL.Point(p.lng, p.lat);
      // 打卡点Marker
      const marker = new BMapGL.Marker(point);
      map.addOverlay(marker);
      // 序号标签
      const label = new BMapGL.Label(p.num.toString(), {
        position: point,
        offset: new BMapGL.Size(-10, -30)
      });
      label.setStyle({
        color: "#fff",
        background: "red",
        borderRadius: "50%",
        width: "24px",
        height: "24px",
        textAlign: "center",
        lineHeight: "24px",
        fontSize: "14px"
      });
      map.addOverlay(label);
    });

    // 可选：接收小程序传递的打卡点数据
    window.addEventListener('message', (e) => {
      const data = e.data;
      if (data && data.type === 'initPoints') {
        const newPoints = data.points;
        // 清空旧覆盖物，重新渲染轨迹（逻辑同上，可复用）
        map.clearOverlays();
      }
    });
  </script>
</body>
</html>

2. 小程序端代码

（1）页面结构（map-page.wxml）

<view class="container">
  <web-view src="{{mapUrl}}" bindmessage="onWebviewMessage"></web-view>
</view>

（2）页面样式（map-page.wxss）

.container {
  width: 100%;
  height: 100vh;
}
web-view {
  width: 100%;
  height: 100%;
}

（3）页面逻辑（map-page.js）

Page({
  data: {
    // 替换成自己的H5地址（HTTPS+备案）
    mapUrl: "https://你的域名/map.html"
  },

  onLoad(options) {
    // 可选：动态向H5传递打卡点数据
    const points = [
      { lng: 116.395, lat: 39.905, name: "景点1", num: 1 },
      { lng: 116.385, lat: 39.910, name: "景点2", num: 2 },
      { lng: 116.415, lat: 39.920, name: "景点3", num: 3 },
      { lng: 116.400, lat: 39.930, name: "景点4", num: 4 }
    ];
    this.setData({ points });
  },

  onWebviewMessage(e) {
    // 可选：接收H5返回的消息
    console.log("收到H5消息：", e.detail.data);
  }
});

四、微信小程序web-view核心规则（必看）

✅ 允许：企业/组织主体小程序，web-view加载「自己备案的HTTPS域名」的H5（个人小程序不支持web-view）。
❌ 禁止：web-view的src直接填写百度域名链接（如百度地图API地址、百度首页），无法将百度域名配置为小程序业务域名。
✅ 允许：H5页面内，通过<script>标签引入百度地图JSAPI，H5跨域调用百度地图接口完全合法。
✅ 必须：小程序后台需配置「业务域名」（添加自己的H5域名），并上传百度地图开放平台的校验文件，否则H5无法正常加载。

五、常见误区与注意事项

误区1：直接用web-view加载百度地图链接 → 线上必失效，需通过自己的H5中转。
误区2：个人小程序使用web-view → 不支持，必须是企业/组织主体小程序。
误区3：H5用HTTP协议 → 小程序仅支持HTTPS，需将H5部署到HTTPS服务器。
注意：坐标统一，百度地图JSAPI默认使用BD09ll坐标，若用GPS（WGS84）或高德（GCJ02）坐标，需先转换为BD09ll。
注意：百度地图AK需配置正确的Referer白名单（填写自己的H5域名），否则JSAPI加载失败。

六、官方文档链接（快速查阅）

百度地图JSAPI GL：https://lbsyun.baidu.com/index.php?title=jspopularGL
百度地图Marker标记：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/Marker
百度地图Polyline折线：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/overlay/Polyline
微信小程序web-view组件：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
微信小程序业务域名配置：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/domain.html