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
。
点击纠错
评价此篇文档