map
基础库 1.63.0 开始支持本组件。
地图组件。相关 API tt.createMapContext。
属性说明
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
---|---|---|---|---|---|
longitude | number | 是 | 中心经度 | 1.63.0 | |
latitude | number | 是 | 中心纬度 | 1.63.0 | |
scale | number | 16 | 否 | 缩放级别,取值范围为 3-19 | 1.63.0 |
markers | Marker[] | 否 | 标记点 | 1.63.0 | |
circles | Circle[] | 否 | 圆 | 1.63.0 | |
show-location | boolean | false | 否 | 是否显示当前位置 | 1.63.0 |
polyline | Polyline[] | 否 | 路线数组 | 1.71.0 | |
include-points | LngLat[] | 否 | 缩放视野以包含所有给定的坐标点;示例:[{latitude: 0, longitude: 0}] | 1.71.0 | |
bindtap | EventHandle | 否 | 点击地图时触发,e.detail = { latitude, longitude} | 1.71.0 | |
bindmarkertap | EventHandle | 否 | 点击标记点时触发,e.detail = {markerId, latitude, longitude} | 1.71.0 | |
bindcallouttap | EventHandle | 否 | 点击标记点对应的气泡时触发, e.detail = {markerId} | 1.71.0 | |
bindregionchange | EventHandle | 否 | 视野发生变化时触发 | 1.71.0 | |
rotate | number | 0 | 否 | 顺时针旋转角度,范围 0 ~ 360,旋转原点为地图容器中心点 | 2.34.0 |
skew | number | 0 | 否 | 倾斜角度,范围 0 ~ 40 , 关于 z 轴的倾角 | 2.34.0 |
polygons | Polygon[] | 否 | 多边形 | 2.34.0 | |
show-compass | boolean | false | 否 | 显示指南针 | 2.34.0 |
enable-overlooking | boolean | false | 否 | 开启俯视手势支持,双指上下滑调整俯仰角 | 2.34.0 |
enable-rotate | boolean | false | 否 | 开启旋转手势支持,双指旋转调整旋转角度 | 2.34.0 |
min-scale | number | 3 | 否 | 最小缩放级别,取值范围为 3 - max-scale | 2.42.0 |
max-scale | number | 19 | 否 | 最大缩放级别,取值范围为 min-scale - 19 | 2.42.0 |
enable-3D | boolean | false | 否 | 是否展示 3D 楼块,该属性 IOS 不支持 | 2.42.0 |
show-scale | boolean | false | 否 | 是否显示比例尺 | 2.42.0 |
enable-zoom | boolean | true | 否 | 是否支持缩放 | 2.42.0 |
enable-scroll | boolean | true | 否 | 是否支持拖动 | 2.42.0 |
enable-satellite | boolean | false | 否 | 是否开启卫星图 | 2.42.0 |
enable-traffic | boolean | false | 否 | 是否开启实时路况,在该属性为 true 时,enable- building 和 enable-3D 无效 | 2.42.0 |
enable-poi | boolean | true | 否 | 是否显示地名 | 2.42.0 |
enable-building | boolean | true | 否 | 是否展示建筑物 | 2.42.0 |
bindlabeltap | EventHandle | 否 | 点击 label 时触发,e.detail = {markerId} | 2.42.0 | |
bindupdated | EventHandle | 否 | 在地图渲染更新完成时触发 | 2.42.0 | |
bindanchorpointtap | EventHandle | 否 | 点击定位标时触发,e.detail = {longitude, latitude} | 2.42.0 |
Marker 类型说明
object 类型,属性如下:
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
---|---|---|---|---|---|
id | number | 否 | 标记点 id | 1.63.0 | |
latitude | number | 是 | 纬度 | 1.63.0 | |
longitude | number | 是 | 经度 | 1.63.0 | |
title | string | 否 | 标注点名,点击时显示;不传或者传空字符串,则点击无反应 | 1.63.0 | |
iconPath | string | 默认 icon | 否 | 图片路径 | 1.63.0 |
width | number | 否 | 标注图标宽度,默认为图片实际宽度 | 2.15.0 | |
height | number | 否 | 标注图标高度,默认为图片实际高度 | 2.15.0 | |
zIndex | number | 否 | marker 的显示层级,默认同 marker 插入顺序 | 2.15.0 | |
callout | Callout | 否 | 标记点上方的气泡窗口,支持的属性见 Callout,可识别换行符。有了 callout 将不显示 title | 2.15.0 | |
alpha | number | 1 | 否 | 标注的透明度,范围 0-1 | 2.34.0 |
anchorX | number | 0.5 | 否 | 以标注图标左上角为原点,经纬度锚点相对于标注图标的横向偏移比例,以向右为正向,取值区间为 [0, 1] | 2.34.0 |
anchorY | number | 1 | 否 | 以标注图标左上角为原点,经纬度锚点相对于标注图标的纵向偏移比例,以向下为正向,取值区间为 [0, 1] | 2.34.0 |
rotate | number | 0 | 否 | 顺时针旋转的角度,范围 0 ~ 360,默认为 0 | 2.42.0 |
label | Label | 否 | 为标记点旁边增加标签,支持的属性见 Label | 2.42.0 |
Callout 类型说明
object 类型,属性如下:
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
---|---|---|---|---|---|
content | string | 否 | 气泡上的文本,不传或者传空字符串取当前 marker 的 title | 2.15.0 | |
color | Color | "#222222" | 否 | 气泡上文本的颜色,支持 HEX, RGBA, 颜色别名 | 2.15.0 |
fontSize | number | 12 | 否 | 文字大小,单位为 px | 2.15.0 |
borderRadius | number | 12 | 否 | 边框圆角,单位为 px | 2.15.0 |
padding | number | 0 | 否 | 文本边缘留白,单位为 px | 2.15.0 |
display | string | "BYCLICK" | 否 | 'BYCLICK':点击显示; 'ALWAYS':常显 | 2.15.0 |
textAlign | string | "center" | 否 | 文本对齐方式。有效值: left, right, center | 2.15.0 |
borderWidth | number | 0 | 否 | 边框宽度 | 2.34.0 |
borderColor | Color | "#000000" | 否 | 边框颜色 | 2.34.0 |
bgColor | Color | "#ffffff" | 否 | 背景色 | 2.34.0 |
anchorX | number | 0 | 否 | 相对于原地位置的横向偏移量,向右为正数 | 2.34.0 |
anchorY | number | 0 | 否 | 相对于原地位置的纵向偏移量,向下为正数 | 2.34.0 |
Label 类型说明
object 类型,属性如下:
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
---|---|---|---|---|---|
content | string | 否 | 气泡上的文本,不传或者传空字符串取当前 marker 的 title | 2.42.0 | |
color | Color | "#222222" | 否 | 气泡上文本的颜色,支持 HEX, RGBA, 颜色别名 | 2.42.0 |
fontSize | number | 12 | 否 | 文字大小,单位为 px | 2.42.0 |
borderRadius | number | 0 | 否 | 边框圆角,单位为 px | 2.42.0 |
padding | number | 0 | 否 | 文本边缘留白,单位为 px | 2.42.0 |
textAlign | string | "center" | 否 | 文本对齐方式。有效值: left, right, center | 2.42.0 |
borderWidth | number | 0 | 否 | 边框宽度 | 2.42.0 |
borderColor | Color | "#000000" | 否 | 边框颜色 | 2.42.0 |
bgColor | Color | "#00000000" | 否 | 背景色 | 2.42.0 |
anchorX | number | 0 | 否 | 相对于原地位置的横向偏移量,向右为正数 | 2.42.0 |
anchorY | number | 0 | 否 | 相对于原地位置的纵向偏移量,向下为正数 | 2.42.0 |
Circle 类型说明
object 类型,属性如下:
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
---|---|---|---|---|---|
latitude | number | 是 | 纬度 | 1.63.0 | |
longitude | number | 是 | 经度 | 1.63.0 | |
color | Color | "#52afff99" | 否 | 边框颜色 | 1.63.0 |
fillColor | Color | "#52afff33" | 否 | 填充颜色 | 1.63.0 |
radius | number | 100 | 否 | 半径,单位 “米” | 1.63.0 |
strokeWidth | number | 1 | 否 | 边框宽度 | 1.63.0 |
LngLat 类型说明
object 类型,属性如下:
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
---|---|---|---|---|---|
longitude | number | 是 | 经度 | 1.71.0 | |
latitude | number | 是 | 纬度 | 1.71.0 |
Polyline 类型说明
object 类型,属性如下:
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
---|---|---|---|---|---|
points | LngLat[] | 是 | 经纬度数组 | 1.71.0 | |
color | Color | "#000000" | 否 | 线的颜色 | 1.71.0 |
width | number | 4 | 否 | 线的宽度 | 1.71.0 |
dottedLine | boolean | false | 否 | 是否虚线 | 1.71.0 |
colorList | Color[] | 否 | 彩虹线,需指定不同分段的颜色,如 points 包含 5 个点,则 colorList 应传入 4 个颜色值;若 colorList 长度小于 points.length - 1,则剩下的分段颜色与最后一项保持一致。 | 2.34.0 | |
borderColor | Color | "#000000" | 否 | 线的边框颜色 | 2.34.0 |
borderWidth | number | 0 | 否 | 线的边框宽度 | 2.34.0 |
Polygon 类型说明
object 类型,属性如下:
属性名 | 类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
---|---|---|---|---|---|
points | LngLat[] | 是 | 多边形顶点经纬度数组,顺时针方向 | 2.34.0 | |
strokeWidth | number | 1 | 否 | 描边的宽度 | 2.34.0 |
strokeColor | Color | "#52afff99" | 否 | 描边的颜色 | 2.34.0 |
fillColor | Color | "#52afff33" | 否 | 填充颜色 | 2.34.0 |
zIndex | number | 0 | 否 | 设置多边形 Z 轴数值 | 2.34.0 |
bindregionchange 返回值
属性名 | 类型 | 说明 | 最低支持版本 |
---|---|---|---|
type | string | 视野变化开始、结束时触发;值为 begin/end | 1.71.0 |
rotate | number | 触发回调时地图的旋转角 | 2.34.0 |
skew | number | 触发回调时地图的倾斜角 | 2.34.0 |
scale | number | 触发回调时地图的缩放级别 | 2.34.0 |
centerLocation | LngLat | 触发回调时地图中心点的经纬度 | 2.34.0 |
region | Region | 触发回调时地图东北角和西南角的经纬度 | 2.34.0 |
Region 类型说明
属性名 | 类型 | 说明 | 最低支持版本 |
---|---|---|---|
northeast | LngLat | 东北角经纬度 | 2.34.0 |
southwest | LngLat | 西南角经纬度 | 2.34.0 |
比例尺
scale | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
---|---|---|---|---|---|---|---|---|---|
比例 | 1000km | 500km | 200km | 100km | 50km | 30km | 20km | 10km | 5km |
scale | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | |
比例 | 2km | 1km | 500m | 200m | 100m | 50m | 25m | 10m |
扫码体验
请使用字节宿主APP扫码
代码示例
<!-- map.ttml -->
<map
id="myMap"
show-location
longitude="{{longitude}}"
latitude="{{latitude}}"
circles="{{circles}}"
markers="{{markers}}"
polyline="{{polyline}}"
scale="{{scale}}"
rotate="{{rotate}}"
skew="{{skew}}"
polygons="{{polygons}}"
show-compass
enable-overlooking
enable-rotate
bindtap="mapTap"
bindmarkertap="markerTap"
bindcallouttap="calloutTap"
bindregionchange="regionChange"
style="width:100%; height: 300px;"
></map>
<view class="container">
<view class="btn-area">
<button bindtap="authLocation" type="primary" size="mini">申请定位权限</button>
<button bindtap="getCenterLocation" type="primary" size="mini">获取当前地图中心位置</button>
<button bindtap="moveToLocation" type="primary" size="mini">移动位置</button>
<button bindtap="getScale" type="primary" size="mini">缩放级别</button>
</view>
</view>
// map.js
Page({
data: {
latitude: 39.907957,
longitude: 116.397493,
scale: 15,
rotate: 10,
skew: 5,
polygons: [
{
points: [
{
latitude: 39.915,
longitude: 116.404,
},
{
longitude: 116.405,
latitude: 39.92,
},
{
longitude: 116.423493,
latitude: 39.907445,
},
],
strokeWidth: 3,
strokeColor: "#224499",
fillColor: "#22334455",
zIndex: 0,
},
],
circles: [
{
latitude: 39.907957,
longitude: 116.397493,
radius: 400,
},
],
markers: [
{
id: 1,
longitude: 116.397493,
latitude: 39.907957,
title: "这是地标1",
alpha: 0.6,
anchorX: 0.5,
anchorY: 1,
},
{
id: 2,
longitude: 116.39394,
latitude: 39.90503,
callout: {
content: "这是地标 2",
color: "#222222",
fontSize: 12,
borderRadius: 12,
padding: 4,
display: "ALWAYS",
textAlign: "center",
borderWidth: 1,
borderColor: "#222222",
bgColor: "#ffffff",
anchorX: 0,
anchorY: 0,
},
},
{
id: 3,
longitude: 116.40159,
latitude: 39.90511,
title: "这是地标3",
},
],
polyline: [
{
points: [
{
longitude: 116.397493,
latitude: 39.907957,
},
{
longitude: 116.39394,
latitude: 39.90503,
},
{
longitude: 116.40159,
latitude: 39.90511,
},
],
color: "#222222",
width: 4,
dottedLine: false,
colorList: ["#000022", "#220000"],
borderColor: "#222222",
borderWidth: 0,
},
],
},
onReady() {
this.mapCtx = tt.createMapContext("myMap");
},
markerTap(e) {
console.log("tap marker", e);
},
mapTap(e) {
console.log("tap map", e);
},
calloutTap(e) {
console.log("tap callout", e);
},
regionChange(e) {
console.log("region", e);
},
getCenterLocation() {
this.mapCtx.getCenterLocation({
success({ longitude, latitude }) {
let res = `经度: ${longitude}, 纬度: ${latitude}`;
console.log(res);
tt.showModal({
content: res,
showCancel: false,
});
},
fail(err) {
console.log("获取位置失败", err);
},
complete(res) {
console.log("getCenterLocation complete", res);
},
});
},
moveToLocation() {
this.mapCtx.moveToLocation({
success(res) {
console.log("move success: ", res);
},
fail(err) {
console.log("move err: ", err);
},
complete(res) {
console.log("move complete", res);
},
});
},
// Auth
authLocation() {
let that = this;
tt.authorize({
scope: "scope.userLocation",
success(res) {
console.log(res, res.data);
if (res.data["scope.userLocation"] === "ok") that.msg("您已允许授权");
},
fail(err) {
console.log(err);
if (err.data["scope.userLocation"] === "auth deny")
that.msg("您已拒绝授权");
},
});
},
getScale() {
let that = this;
this.mapCtx.getScale({
success(res) {
console.log("getScale 成功执行了", res);
that.msg(`当前缩放级别:${res.scale}`);
},
fail(err) {
console.log("getScale失败", err);
},
complete(res) {
console.log("缩放complete执行", res);
},
});
},
msg(title, duration = 1500) {
tt.showToast({
title,
duration,
});
},
});
Bug & Tip
- Bug:在基础库 2.42.0 版本之前(不包括 2.42.0 版本),Android 的
callout.display
不支持ALWAYS
属性值; - Bug:在基础库 2.42.0 版本之前(不包括 2.42.0 版本),Android 不支持同时显示两个 callout ;
- Bug:在基础库 2.42.0 版本之前(不包括 2.42.0 版本),Android 不支持 callout 向下偏移;
- Tip:如果不传经纬度属性则默认为北京中心的经纬度;
- Tip:
scale
在给定include-points
时无效; - Tip:Android 中地图组件宽高不能超过屏幕宽高(屏幕宽高包含导航栏);
- Tip:如果
polyline
属性的colorList
和color
同时存在,优先应用colorList
。
点击纠错
该文档是否对你的开发有所帮助?
有帮助
没帮助
该文档是否对你的开发有所帮助?
有帮助
没帮助