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 | Array <marker> | 否 | 标记点 | 1.63.0 | |
| circles | Array <circle> | 否 | 圆 | 1.63.0 | |
| show-location | boolean | false | 否 | 是否显示当前位置 | 1.63.0 |
| polyline | Array <polyline> | 否 | 路线 | 1.71.0 | |
| include-points | Array <point> | 否 | 缩放视野以包含所有给定的坐标点；示例：[{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 |
marker
| 属性 | 类型 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|
| 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 |
circle
| 属性 | 类型 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|
| latitude | number | 是 | 纬度 | 1.63.0 |
| longitude | number | 是 | 经度 | 1.63.0 |
| color | string | 否 | 边框颜色 | 1.63.0 |
| fillColor | string | 否 | 填充颜色 | 1.63.0 |
| radius | number | 否 | 半径，单位 “米” | 1.63.0 |
| strokeWidth | number | 否 | 边框宽度 | 1.63.0 |
polyline
| 属性 | 类型 | 必填 | 说明 | 最低支持版本 |
|---|---|---|---|---|
| points | array | 是 | 经纬度数组 | 1.71.0 |
| color | string | 否 | 线的颜色 | 1.71.0 |
| width | number | 否 | 线的宽度 | 1.71.0 |
| dottedLine | boolean | 否 | 是否虚线，默认 false | 1.71.0 |
bindregionchange 返回值
| 属性 | 类型 | 说明 | 最低支持版本 |
|---|---|---|---|
| type | string | 视野变化开始、结束时触发；值为 begin/end | 1.71.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 |
代码示例
<!-- map.ttml -->
<map
id="myMap"
show-location
longitude="{{longitude}}"
latitude="{{latitude}}"
circles="{{circles}}"
markers="{{markers}}"
polyline="{{polyline}}"
include-points="{{includepoints}}"
scale="{{scale}}"
bindtap="maptap"
bindmarkertap="markertap"
bindcallouttap="callouttap"
bindregionchange="regionchange"
style="width:100%; height: 300px;"
></map>// map.js
Page({
data: {
latitude: 39.915,
longitude: 116.404,
scale: 15,
circles: [
{
latitude: 39.915,
longitude: 116.404,
radius: 400,
},
],
includepoints: [
{
latitude: 39.915,
longitude: 116.404,
},
{
longitude: 116.405,
latitude: 39.92,
},
{
longitude: 116.423493,
latitude: 39.907445,
},
{
latitude: 39.915,
longitude: 116.404,
},
{
longitude: 116.423493,
latitude: 39.907445,
},
],
markers: [
{
id: 1,
latitude: 39.915,
longitude: 116.404,
title: "这是地标1",
},
{
id: 2,
longitude: 116.405,
latitude: 39.92,
title: "这是地标2",
},
],
polyline: [
{
points: [
{
latitude: 39.915,
longitude: 116.404,
},
{
longitude: 116.405,
latitude: 39.92,
},
{
longitude: 116.423493,
latitude: 39.907445,
},
],
dottedLine: false,
arrowLine: false,
},
],
},
onReady: function (e) {
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("regionchange", e);
},
});扫码体验
请使用字节宿主APP扫码
Bug & Tip
- Tip：如果不传经纬度属性则默认为北京中心的经纬度。
- Tip：地图初始化时，如果
show-location为 true 且获取了定位权限，Android 表现为定位在用户当前位置。iOS 为指定经纬度(若不设置则为默认经纬度)。 - Tip：
show-location为 true 且地图默认定位为当前定位点时，当前定位点优先级大于include-points。
点击纠错
评价此篇文档