开发
API

map

基础库 1.63.0 开始支持本组件。

地图组件。相关 API tt.createMapContext

属性说明

属性名类型默认值必填说明最低支持版本
longitudenumber中心经度1.63.0
latitudenumber中心纬度1.63.0
scalenumber16缩放级别,取值范围为 3-191.63.0
markersMarker[]标记点1.63.0
circlesCircle[]1.63.0
show-locationbooleanfalse是否显示当前位置1.63.0
polylinePolyline[]路线1.71.0
include-pointsPoint[]缩放视野以包含所有给定的坐标点;示例:[{latitude: 0, longitude: 0}]1.71.0
bindtapEventHandle点击地图时触发,e.detail = { latitude, longitude}1.71.0
bindmarkertapEventHandle点击标记点时触发,e.detail = {markerId, latitude, longitude}1.71.0
bindcallouttapEventHandle点击标记点对应的气泡时触发, e.detail = {markerId}1.71.0
bindregionchangeEventHandle视野发生变化时触发1.71.0

Marker

标记点,用于在地图上显示标记的位置。

属性类型默认值必填说明最低支持版本
idnumber标记点 id1.63.0
latitudenumber纬度1.63.0
longitudenumber经度1.63.0
titlestring""标注点名,点击时显示,不传则点击无反应1.63.0
iconPathstring默认 icon图片路径1.63.0
widthnumber标注图标宽度,默认根据屏幕 DPI 缩放2.15.0
heightnumber标注图标高度,默认根据屏幕 DPI 缩放2.15.0
zIndexnumbermarker 的显示层级,默认同 marker 插入顺序2.15.0
calloutCallout标记点上方的气泡窗口,支持的属性见 Callout,可识别换行符。有了 callout 将不显示 title2.15.0

Callout

属性类型默认值必填说明最低支持版本
contentstring""气泡上的文本2.15.0
colorColor#222222气泡上文本的颜色,支持 HEX, RGBA, 颜色别名2.15.0
fontSizenumber12文字大小,单位为 px2.15.0
borderRadiusnumber12边框圆角,单位为 px2.15.0
paddingnumber0文本边缘留白,单位为 px2.15.0
displaystringBYCLICK'BYCLICK':点击显示; 'ALWAYS':常显2.15.0
textAlignstringcenter文本对齐方式。有效值: left, right, center2.15.0

Circle

在地图上显示圆。

属性类型必填说明最低支持版本
latitudenumber纬度1.63.0
longitudenumber经度1.63.0
colorColor边框颜色1.63.0
fillColorColor填充颜色1.63.0
radiusnumber半径,单位 “米”1.63.0
strokeWidthnumber边框宽度1.63.0

Polyline

指定一系列坐标点,从数组第一项连线至最后一项。

属性类型必填说明最低支持版本
pointsLngLat[]经纬度数组, LngLat 的格式为:{ longitude: number, latitude: number}1.71.0
colorColor线的颜色1.71.0
widthnumber线的宽度1.71.0
dottedLineboolean是否虚线,默认 false1.71.0

bindregionchange 返回值

属性类型说明最低支持版本
typestring视野变化开始、结束时触发;值为 begin/end1.71.0

比例尺

scale34567891011
比例1000km500km200km100km50km30km20km10km5km
scale1213141516171819
比例2km1km500m200m100m50m25m10m

代码示例

开发者工具中预览

<!-- 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
  • Tip:scale 在给定 include-points 时无效。
  • Tip:在开发者工具上map组件使用的是百度地图,和真机存在差异,真机使用的是高德地图。后续会对齐真机表现。
  • Tip:Android callout.display 暂不支持 ALWAYS
  • Tip:Android 中地图组件宽高不能超过屏幕宽高(屏幕宽高包含导航栏)。
点击纠错
评价此篇文档