百度智能小程序 地图
map 地图
解释：地图，客户端创建的 原生组件，使用时请注意相关限制。
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | Web 态说明 |
|---|---|---|---|---|---|---|
| longitude | Number | 是 | gcj02 坐标系中心经度 | - | - | |
| latitude | Number | 是 | gcj02 坐标系中心纬度 | - | - | |
| scale | Number | 16 | 否 | 缩放级别，取值范围为 4-21 。 | - | - |
| markers | Array.<marker> | 否 | 标记点 | - | - | |
| polyline | Array.<polyline> | 否 | 路线 | - | - | |
| polygons | Array.<polygon> | 否 | 多边形（工具暂不支持） | 2.0.13
低版本请做兼容性处理 |
- | |
| circles | Array.<circle> | 否 | 圆 | - | - | |
| controls | Array.<control> | 否 | 控件 | - | - | |
| include-points | Array.<point> | 否 | 缩放视野以包含所有给定的坐标点 | - | - | |
| show-location | Boolean | false | 否 | 显示带有方向的当前定位点 | - | 暂时不能显示方向 |
| enable-3D | Boolean | false | 否 | 显示 3D 楼块（工具暂不支持） | 2.0.13
低版本请做兼容性处理 |
暂不支持 |
| show-compass | Boolean | false | 否 | 显示指南针（工具暂不支持） | 2.0.13
低版本请做兼容性处理 |
暂不支持 |
| enable-overlooking | Boolean | false | 否 | 开启俯视（工具暂不支持） | 2.0.13
低版本请做兼容性处理 |
暂不支持 |
| enable-zoom | Boolean | true | 否 | 是否支持缩放（工具暂不支持） | 2.0.13
低版本请做兼容性处理 |
- |
| enable-scroll | Boolean | true | 否 | 是否支持拖动（工具暂不支持） | 2.0.13
低版本请做兼容性处理 |
- |
| enable-rotate | Boolean | false | 否 | 是否支持旋转（工具暂不支持） | 2.0.13
低版本请做兼容性处理 |
暂不支持 |
| bindmarkertap | EventHandle | 否 | 点击标记点时触发 | - | - | |
| bindcallouttap | EventHandle | 否 | 点击标记点对应的气泡时触发 | - | - | |
| bindcontroltap | EventHandle | 否 | 点击控件时触发 | - | - | |
| bindregionchange | EventHandle | 否 | 视野发生变化时触发 | - | - | |
| bindtap | EventHandle | 否 | 点击地图时触发 | - | - | |
| bindupdated | EventHandle | 否 | 在地图渲染更新完成时触发 | - | - | |
| bindpoitap | EventHandle | 否 | 点击地图 poi 点时触发 | - | 暂不支持 |
示例
代码示例
<view class="wrap">
<view class="card-area">
<map class="map"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="{{scale}}"
markers="{{markers}}"
polyline="{{polyline}}"
polygons="{{drawPolygon ? polygons : []}}"
circles="{{circles}}"
controls="{{controls}}"
show-location="{{showLocation}}"
include-points="{{includePoints}}"
enable-3D="{{enable3d}}"
show-compass="{{showCompass}}"
enable-overlooking="{{enableOverlooking}}"
enable-zoom="{{enableZoom}}"
enable-scroll="{{enableScroll}}"
enable-rotate="{{enableRotate}}"
bindmarkertap="onMarkertap"
bindcallouttap="onCallouttap"
bindcontroltap="onControltap"
bindregionchange="onRegionchange"
bindtap="onTap"
bindupdated="onUpdated"
bindpoitap="onPoitap">
</map>
<view class="item-scroll block border-bottom">
<text class="switch-text">支持缩放</text>
<switch bindchange="toggleZoom" checked></switch>
</view>
<view class="item-scroll block border-bottom">
<text class="switch-text">支持拖动</text>
<switch bindchange="toggleScroll" checked></switch>
</view>
<view class="item-scroll block border-bottom" s-if="{{!isWeb}}">
<text class="switch-text">支持旋转</text>
<switch bindchange="toggleRotate" checked></switch>
</view>
</view>
<view class="tip-week">工具暂不支持手势控制</view>
</view>Page({
data: {
latitude: '40.048828',
longitude: '116.280412',
scale: 16,
polygons: [],
drawPolygon: false,
includePoints: [],
showLocation: true,
enable3d: false,
showCompass: false,
enableOverlooking: false,
enableZoom: true,
enableScroll: true,
enableRotate: true,
markers: [{
markerId: '1',
latitude: '40.052751',
longitude: '116.278796'
}, {
markerId: '2',
latitude: '40.048828',
longitude: '116.280412',
callout: {
display: 'ALWAYS',
content: '百度科技园'
}
}, {
markerId: '3',
latitude: '40.049655',
longitude: '116.27505',
callout: {
display: 'ALWAYS',
content: '西山壹号院'
}
}],
polyline: [{
points: [{
longitude: 116.278796,
latitude: 40.048828
}, {
longitude: 116.27505,
latitude: 40.049655
}],
color: '#FF5F41FF',
width: 2,
dottedLine: true
}],
controls: [{
controlId: 1,
iconPath: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/api_logo.png',
position: {
left: 0,
top: 100,
width: 50,
height: 50
},
clickable: true
}],
circles: [{
latitude: '40.052751',
longitude: '116.278796',
color: '#FF5F41FF',
fillColor: '#21FFFFFF',
radius: '200',
strokeWidth: '2'
}]
},
showLocation() {
this.setData({
showLocation: !this.data.showLocation
});
},
toggle3d() {
this.setData({
enable3d: !this.data.enable3d
});
},
toggleShowCompass() {
this.setData({
showCompass: !this.data.showCompass
});
},
toggleOverlooking() {
this.setData({
enableOverlooking: !this.data.enableOverlooking
});
},
toggleZoom() {
this.setData({
enableZoom: !this.data.enableZoom
});
},
toggleScroll() {
this.setData({
enableScroll: !this.data.enableScroll
});
},
toggleRotate() {
this.setData({
enableRotate: !this.data.enableRotate
});
},
togglePolygon() {
this.setData({
drawPolygon: !this.data.drawPolygon
});
},
onMarkertap(e) {
console.log('onMarkertap callback:', e);
},
onCallouttap(e) {
console.log('onCallouttap callback:', e);
},
onControltap(e) {
console.log('onControltap callback:', e);
},
onRegionchange(e) {
console.log('onRegionchange callback:', e);
},
onTap(e) {
console.log('onTap callback:', e);
},
onUpdated(e) {
console.log('onUpdated callback:', e);
},
onPoitap(e) {
console.log('onPoitap callback:', e);
}
});markers
解释：标记点，用于在地图上显示标记的位置。
属性说明
| 属性名 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| markerId | 标记点 id | Number | 否 | marker 点击事件回调会返回此 id。建议为每个 marker 设置 Number 类型的 id，保证更新 marker 时有更好的性能。 |
| latitude | 纬度 | Number | 是 | 浮点数，范围 -90 ~ 90 。 |
| longitude | 经度 | Number | 是 | 浮点数，范围 -180 ~ 180 。 |
| zIndex | 显示层级 | Number | 否 | |
| iconPath | 显示的图标 | String | 是 | 项目目录下的图片路径，支持网络路径、本地路径（相对和绝对路径写法），工具暂不支持绝对路径写法。 |
| rotate | 旋转角度 | Number | 否 | 默认为 0，顺时针旋转的角度，范围 0 ~ 360 。 |
| alpha | 标注的透明度 | Number | 否 | 默认为 1，无透明，范围 0 ~ 1 。 |
| width | 标注图标宽度 | Number | 否 | 默认为图片实际宽度 |
| height | 标注图标高度 | Number | 否 | 默认为图片实际高度 |
| callout | 自定义标记点上方的气泡窗口 | Object | 否 | 支持的属性见下表，可识别换行符。 |
| label | 为标记点旁边增加标签 | Object | 否 | 支持的属性见下表，可识别换行符。 |
| anchor | 经纬度在标注图标的锚点 | Object | 否 | 默认底边中点，{x, y}，x 表示横向(0-1)，y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点。 |
callout 属性说明
| 属性名 | 说明 | 类型 | 备注 |
|---|---|---|---|
| content | 文本 | String | |
| color | 文本颜色 | String | 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）。 |
| fontSize | 文字大小 | Number | |
| borderWidth | 边框宽度 | Number | |
| borderColor | 边框颜色 | String | 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）。 |
| borderRadius | callout 边框圆角 | Number | |
| bgColor | 背景色 | String | 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）。 |
| padding | 文本边缘留白 | Number | |
| display | ‘BYCLICK’:点击显示; ‘ALWAYS’:常显 | String | 默认为常显 |
| textAlign | 文本对齐方式。有效值： left ， right ， center 。 | String | 默认为居中对齐 |
label 属性说明
| 属性名 | 说明 | 类型 | 备注 |
|---|---|---|---|
| content | 文本 | String | |
| color | 文本颜色 | String | 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）。 |
| fontSize | 文字大小 | Number | |
| x | label 的坐标，原点是 marker 对应的经纬度 | Number | |
| y | label 的坐标，原点是 marker 对应的经纬度 | Number | |
| borderWidth | 边框宽度 | Number | |
| borderColor | 边框颜色 | String | 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）。 |
| borderRadius | 边框圆角 | Number | |
| bgColor | 背景色 | String | 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）。 |
| padding | 文本边缘留白 | Number | |
| textAlign | 文本对齐方式。有效值： left ， right ， center 。 | String | 默认为居中对齐 |
参考示例
图片示例
代码示例：
<view class="wrap">
<map
style="width: 100%; height: 300px;"
longitude="{{longitude}}"
latitude="{{latitude}}"
markers="{{markers}}"
bindmarkertap="bindmarkertap"
bindcallouttap="bindcallouttap">
</map>
</view>Page({
data: {
latitude: 40.048828,
longitude: 116.280412,
markers: [{
markerId: 1,
latitude: 40.048828,
longitude: 116.280412,
title: 'markerId: 1',
zIndex: 100,
iconPath: '../images/location.png',
rotate: 90,
callout: {
display: 'ALWAYS',
content: '百度科技园',
color: '#000',
fontSize: '16',
borderRadius: 50,
bgColor: '#5B9FFF',
padding: 2,
textAlign: 'center'
}
}, {
markerId: 2,
latitude: 40.049655,
longitude: 116.27505,
title: 'markerId: 2',
zIndex: 100,
rotate: 90,
alpha: 0.5,
width: 30,
height: 50,
label: {
'content': 'label',
'color': '#7B68EE',
'fontSize': 16,
'borderWidth': 1,
'borderColor': '#5B9FFF',
'borderRadius': 50,
'bgColor': '#ADCFFF',
'padding': 5,
'textAlign': 'center'
},
anchor: {x: .5, y: 1},
callout: {
display: 'BYCLICK',
content: '西山壹号院',
color: '#FFF',
fontSize: '16',
borderRadius: 50,
bgColor: '#5B9FFF',
padding: 2,
textAlign: 'center'
}
}]
},
bindmarkertap() {
swan.showToast({
title: '点击标记啦',
icon: 'none'
});
},
bindcallouttap() {
swan.showToast({
title: '点击标记上方气泡啦',
icon: 'none'
});
}
});polyline
解释：指定一系列坐标点，从数组第一项连线至最后一项。
属性说明
| 属性名 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| points | 经纬度数组 | Array | 是 | [{latitude: 0, longitude: 0}] |
| color | 线的颜色 | String | 否 | 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）。 |
| width | 线的宽度 | Number | 否 | |
| dottedLine | 是否虚线 | Boolean | 否 | 默认 false |
| arrowLine | 带箭头的线 | Boolean | 否 | 默认 false |
| arrowIconPath | 更换箭头图标 | String | 否 | 在 arrowLine 为 true 时生效 |
| borderColor | 线的边框颜色 | String | 否 | 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）。 |
| borderWidth | 线的厚度 | Number | 否 |
示例
图片示例
代码示例
<view class="wrap">
<map
style="width: 100%; height: 300px;"
longitude="{{longitude}}"
latitude="{{latitude}}"
polyline="{{polyline}}">
</map>
</view>polygon
解释：指定一系列坐标点，根据 points 坐标数据生成闭合多边形。
属性说明
| 属性名 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| points | 经纬度数组 | Array | 是 | [{latitude: 0, longitude: 0}] |
| strokeWidth | 描边的宽度 | Number | 否 | |
| strokeColor | 描边的颜色 | String | 否 | 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）。 |
| fillColor | 填充颜色 | String | 否 | 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）。 |
| zIndex | 设置多边形 Z 轴数值 | Number | 否 |
示例
图片示例
代码示例
<view class="wrap">
<map
style="width: 100%; height: 300px;"
longitude="{{longitude}}"
latitude="{{latitude}}"
polygons="{{polygons}}">
</map>
</view>Page({
data: {
latitude: 40.048828,
longitude: 116.280412,
polygons: [{
points: [{
longitude: 116.278796,
latitude: 40.048828
}, {
longitude: 116.27505,
latitude: 40.049655
},{
longitude: 116.27305,
latitude: 40.050655
},{
longitude: 116.27105,
latitude: 40.051655
}],
strokeWidth: 1,
strokeColor: '#000000AA',
fillColor: '#000000AA',
zIndex: 20
}]
}
});circle
解释：在地图上显示圆
属性说明
| 属性名 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| latitude | 纬度 | Number | 是 | 浮点数，范围 -90 ~ 90 。 |
| longitude | 经度 | Number | 是 | 浮点数，范围 -180 ~ 180 。 |
| color | 描边的颜色 | String | 否 | 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）。 |
| fillColor | 填充颜色 | String | 否 | 8 位十六进制表示，最后 2 位表示 alpha 值（可省略）。 |
| radius | 半径 | Number | 是 | |
| strokeWidth | 描边的宽度 | Number | 否 |
示例
图片示例
代码示例
<view class="wrap">
<map
style="width: 100%; height: 300px;"
longitude="{{longitude}}"
latitude="{{latitude}}"
circles="{{circles}}">
</map>
</view>Page({
data: {
scale: 16,
latitude: 40.048828,
longitude: 116.280412,
circles: [{
latitude: 40.052751,
longitude: 116.278796,
color: '#FF5F41FF',
fillColor: '#FF5F41FF',
radius: 200,
strokeWidth: 2
}]
}
});control
解释：在地图上显示控件，控件不随着地图移动。
属性说明
| 属性名 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| controlId | 控件 id | Number | 否 | 在控件点击事件回调会返回此 id |
| position | 控件在地图的位置 | Object | 是 | 控件相对地图位置 |
| iconPath | 显示的图标 | String | 是 | 项目目录下的图片路径，支持网络路径、本地路径（相对和绝对路径写法），工具暂不支持绝对路径写法。 |
| clickable | 是否可点击 | Boolean | 否 | 默认不可点击 |
position 属性说明
| 属性名 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| left | 距离地图的左边界多远 | Number | 否 | 默认为 0 |
| top | 距离地图的上边界多远 | Number | 否 | 默认为 0 |
| width | 控件宽度 | Number | 否 | 默认为图片宽度 |
| height | 控件高度 | Number | 否 | 默认为图片高度 |
示例
图片示例
代码示例
<view class="wrap">
<map
style="width: 100%; height: 300px;"
longitude="{{longitude}}"
latitude="{{latitude}}"
controls="{{controls}}"
bindcontroltap="bindcontroltap"
>
</map>
</view>Page({
data: {
latitude: 40.048828,
longitude: 116.280412,
controls: [{
controlId: 1,
iconPath: '/images/navigate.png',
position: {
left: 0,
top: 100,
width: 50,
height: 50
},
clickable: true
}]
},
bindcontroltap() {
swan.showToast({
title: '点击控件',
icon: 'none'
})
}
});代码示例 - 错误用法：原生组件设置 border 无效，也不可用 cover-view 覆盖为圆角
<view class="wrap">
<cover-view class="card-area">
<map
longitude="{{longitude}}"
latitude="{{latitude}}">
</map>
</cover-view>
</view>.card-area {
width: 3.88rem;
height: 2.18rem;
}Bug & Tip
- Tip：地图组件的经纬度必填，如果不填经纬度则默认值是北京的经纬度。
- Tip：map 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
- Tip：请勿在 scroll-view、swiper、picker-view、movable-view 中使用 map 组件。
- Tip：CSS 动画对 map 组件无效。
- Tip：cover-view、cover-image 组件可覆盖在 map 组件之上。
- Bug：map 组件的 markers 的 label 暂不支持换行。
- Tip：Android 与 iOS 定位精度不同，双端定位存在差异。
- Tip：map 组件使用的经纬度是火星坐标系，调用 swan.getLocation 接口需要指定 type 为 gcj02 。
- Tip：开发者工具由于坐标系不同，定位与客户端存在差异。开发时请以客户端为准。
- Bug：Web 态由于坐标系不同，定位与客户端存在差异，坐标与客户端相比有一定偏移。待后续版本修复。