staticMap 用于生成一张地图图片的 URL,得到 URL 后直接赋给小程序 <image> 组件的 src 即可展示。适用于只需要展示地图、不需要交互的场景,例如订单详情里的位置缩略图、分享卡片、消息列表配图。
标注、标签、折线的坐标与样式是两个独立参数,用竖线分隔后按顺序一一对应。
样式串各字段用英文逗号分隔:
其余参数与官方静态图服务文档一致,会原样透传。
success 回调入参:
失败时走 fail 回调,入参统一为 { errMsg, message, statusCode, rawMessage },字段含义见"服务介绍 → 统一的回调约定"。
fail 只在未配置 ak 时触发,且入参只有 errMsg。参数写错不会走 fail,而是返回一张异常图片。
生成一张带标注点、文字标签和折线的地图图片,并支持调整地图级别:
// pages/index/index.js// 引用百度地图微信小程序 JSAPI 模块const { BMapWX } = require('../../libs/bmap-wx.min.js');const bmap = new BMapWX({ ak: '您的ak' });Page({data: {mapUrl: '',zoom: 14,error: '',},onLoad() {this.buildMap();},// staticMap 只在本地拼装 URL,不发起网络请求,success 是同步回调buildMap() {bmap.staticMap({center: '116.397470,39.908823', // 注意:静态图坐标是"经度,纬度"width: 400,height: 300,zoom: this.data.zoom,// 标注点:坐标用竖线分隔,样式与坐标一一对应markers: '116.397470,39.908823|116.403963,39.915119',markerStyles: 'm,A,0xFF0000|m,B,0x0000FF',// 标签:坐标只写位置,文字写在 labelStyles 的 content 里labels: '116.391000,39.905000',labelStyles: '天安门,1,18,0x006600,0xFFFFFF,1',// 折线:点用分号分隔,多条折线之间才用竖线paths: '116.397470,39.908823;116.403963,39.915119',pathStyles: '0x0000ff,4,1',success: res => this.setData({ mapUrl: res.url, error: '' }),// 未配置 ak 时才会走这里,此时只有 errMsgfail: err => this.setData({ error: '静态图生成失败:' + (err.message || err.errMsg) }),});},onZoomChange(e) {this.setData({ zoom: e.detail.value }, () => this.buildMap());},// 图片加载失败时 URL 通常是对的,多为域名未配置或网络问题onImgError(e) {this.setData({error: '图片加载失败(' + (e.detail.errMsg || '网络错误') +')。可把 URL 复制到浏览器验证;浏览器能显示说明是域名或网络配置问题',});},});
<!-- pages/index/index.wxml --><imagestyle="width: 100%;"src="{{mapUrl}}"mode="widthFix"show-menu-by-longpressbinderror="onImgError"/><slider min="3" max="18" value="{{zoom}}" show-value bindchange="onZoomChange" /><view wx:if="{{error}}">{{error}}</view>
下图为官方 Demo"静态图"的运行界面,扫描下方小程序码即可直接体验。Demo 是产品化示例,界面比上面的示例代码精致,但调用方式与返回数据完全一致。


scale=2 时受服务端限制:宽高必须 ≤ 512、zoom 上限为 18,超限会返回错误图或空白图。
本接口不校验参数合法性,样式串写错时不会报错。调试时建议把 url 复制到浏览器直接看服务端返回。
上一篇
下一篇