百度地图开放平台
更新时间: 2026/09/10 16:28
静态图
简介

staticMap 用于生成一张地图图片的 URL,得到 URL 后直接赋给小程序 <image> 组件的 src 即可展示。适用于只需要展示地图、不需要交互的场景,例如订单详情里的位置缩略图、分享卡片、消息列表配图。

staticMap 与其他接口不同:它只在本地拼装 URL,不发起任何网络请求success 是同步回调。真正的图片请求由 <image> 组件发起,因此不消耗接口调用配额,但会消耗静态图服务的图片请求配额。
静态图的坐标顺序是"经度,纬度",与 search / geocoding 的"纬度,经度"相反,和天气接口一致。对照表见"服务介绍 → 坐标系说明"。
请求参数:取景
参数类型必填默认值说明

center

String

北京

中心点"经度,纬度"或地点名,与 bbox 二选一

bbox

String

视野范围"minX,minY;maxX,maxY",与 center 二选一

zoom

Number

11

地图级别 [3,19];scale=2 时上限 18

coordtype

String

gcj02ll

坐标类型,默认与小程序坐标系一致

请求参数:覆盖物

标注、标签、折线的坐标样式是两个独立参数,用竖线分隔后按顺序一一对应。

参数类型必填默认值说明

markers

String

标注点坐标,多点用竖线分隔

labels

String

标签坐标,多点用竖线分隔;文字写在 labelStyles 里

paths

String

折线/多边形坐标,点用分号分隔,多条折线用竖线分隔

markerStyles

String

标注点样式,格式见下表

labelStyles

String

标签样式,格式见下表

pathStyles

String

折线样式,格式见下表

样式串各字段用英文逗号分隔:

参数格式示例

markerStyles

size,label,color

m,A,0xFF0000

labelStyles

content,fontWeight,fontSize,fontColor,bgColor,border

天安门,1,18,0x006600,0xFFFFFF,1

pathStyles

color,weight,opacity[,fillColor]

0x0000ff,4,1

两个容易踩的点:labels 只写坐标,标签文字写在 labelStyles 的第一个字段 content 里paths 的点之间用分号分隔,而多条折线之间用竖线分隔,两者不要混用。
颜色统一用 0x 前缀的十六进制,不是 CSS 的 # 前缀。
请求参数:输出
参数类型必填默认值说明

width

Number

400

图片宽度 px;scale=2 时须 ≤ 512

height

Number

300

图片高度 px;scale=2 时须 ≤ 512

scale

Number

1

1 普通图 / 2 高清图(输出 2 倍像素)

copyright

Number

0

版权样式:0 logo + 文字 / 1 纯文字

dpiType

String

ph 高清屏 / pl 低分屏,自 V3 起已废弃,仅保留兼容

success

Function

成功回调(同步执行)

fail

Function

失败回调,仅在未配置 ak 时触发

其余参数与官方静态图服务文档一致,会原样透传。

返回值

success 回调入参:

字段类型说明

url

String

图片地址(https,含 ak 及可选 sn 校验参数),可直接用于 <image src>

originalData

Object

实际参与拼装的完整参数对象,便于调试

失败时走 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 时才会走这里,此时只有 errMsg
fail: 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 -->
<image
style="width: 100%;"
src="{{mapUrl}}"
mode="widthFix"
show-menu-by-longpress
binderror="onImgError"
/>
<slider min="3" max="18" value="{{zoom}}" show-value bindchange="onZoomChange" />
<view wx:if="{{error}}">{{error}}</view>
Demo 效果与体验

下图为官方 Demo"静态图"的运行界面,扫描下方小程序码即可直接体验。Demo 是产品化示例,界面比上面的示例代码精致,但调用方式与返回数据完全一致。

注意事项
<image> 加载网络图片时微信走的是 downloadFile 通道。除了配置环境里已加的 request 合法域名,还需要在微信公众平台把 https://api.map.baidu.com 加入 downloadFile 合法域名,否则真机上图片不显示(控制台报 downloadFile:fail url not in domain list)。开发者工具勾选"不校验合法域名"时不会暴露这个问题。
  • scale=2 时受服务端限制:宽高必须 ≤ 512、zoom 上限为 18,超限会返回错误图或空白图。

  • 本接口不校验参数合法性,样式串写错时不会报错。调试时建议把 url 复制到浏览器直接看服务端返回。

上一篇

骑行路线规划

下一篇

类参考和DEMO
本篇文章对您是否有帮助?