map
基础库 2.0.12 开始支持, 低版本需做兼容处理。
依赖 MapKit 插件, 插件版本 >= 2.2.2。
Tuya MiniApp Tools 上是通过 WebView 模拟的与真机存在差异，请以真机效果为主。
地图。相关 API：ty.createMapContext。这是基于异层渲染的原生组件, 请注意 原生组。件使用限制。
下载智能生活 App 进行体验
Demo下载地址
属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| longitude | number | 是 | 中心经度 | |
| latitude | number | 是 | 中心纬度 | |
| scale | number | 16 | 否 | 缩放级别，取值范围为 4-19 |
| min-scale | number | 4 | 否 | 最小缩放级别 |
| max-scale | number | 19 | 否 | 最大缩放级别 |
| markers | Array<marker> | 否 | 标记点 | |
| polyline | Array.<polyline> | 否 | 路线。IDE不支持, 请真机查看 | |
| circles | Array.<circle> | 否 | 圆。IDE不支持, 请真机查看 | |
| polygons | Array.<polygon> | 否 | 多边形。 IDE不支持, 请真机查看 | |
| border-width | number | 0 | 否 | 边框的宽度, 单位 px |
| border-style | string | solid | 否 | 边框的样式, 可选值: solid 和 dashed |
| border-color | string | #ffffff | 否 | 边框的颜色, 必须为十六进制格式 |
| border-radius | number | 0 | 否 | 边框的圆角, 单位 px |
| border-radius-top-left | number | 否 | 边框的左上角圆角大小, 单位 px | |
| border-radius-top-right | number | 否 | 边框的右上角圆角大小, 单位 px | |
| border-radius-bottom-left | number | 否 | 边框的左下角圆角大小, 单位 px | |
| border-radius-bottom-right | number | 否 | 边框的右下角圆角大小, 单位 px | |
| background-color | string | #ffffff | 否 | 背景颜色, 必须为十六进制格式 |
| bind:markertap | eventhandle | 否 | 点击标记点时触发，e.detail = {markerId} | |
| bind:callouttap | eventhandle | 否 | 点击标记点对应的气泡时触发 e.detail = {markerId} | |
| bind:regionchange | eventhandle | 否 | 视野发生变化时触发。IDE不支持, 请真机查看 | |
| bind:initdone | eventhandle | 否 | 初始化完成时触发。IDE不支持, 请真机查看 |
regionchange 返回值
视野改变时，regionchange 会触发两次，返回的 type 值分别为 begin 和 end。
marker
标记点用于在地图上显示标记的位置。
| 属性名 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| id | 标记点 ID | number | 是 | marker 点击事件回调会返回此 id。 id应不大于 2^32 |
| longitude | 经度 | number | 是 | 浮点数，范围 -180 ~ 180 |
| latitude | 纬度 | number | 是 | 浮点数，范围 -90 ~ 90 |
| title | 标注点名 | string | 否 | 点击时显示，callout 存在时将被忽略 |
| styleId | 气泡样式类型 ID | string | 否 | 由原生实现的 marker 样式类型 id |
| callout | 标记点上方的气泡窗口数据源 | object | 否 | 支持的属性见下表，可识别换行符。存在 styleId 时，根据所选样式类型传入属性 |
| iconPath | 显示的图标 | string | 是 | 项目目录下的图片路径，支持网络路径、代码包路径 |
| rotate | 旋转角度 | number | 否 | 顺时针旋转的角度，范围 0 ~ 360，默认为 0 |
| width | 标注图标宽度 | number/string | 否 | 默认为图片实际宽度 |
| height | 标注图标高度 | number/string | 否 | 默认为图片实际高度 |
marker 上的气泡 callout
| 属性名 | 说明 | 类型 |
|---|---|---|
| content | 文本 | string |
| color | 文本颜色 | string |
| fontSize | 文字大小 | number |
| borderRadius | 边框圆角 | number |
| borderWidth | 边框宽度 | number |
| borderColor | 边框颜色 | string |
| bgColor | 背景色 | string |
| padding | 文本边缘留白 | number |
| textAlign | 文本对齐方式。有效值: left, right, center | string |
| anchorX | 横向偏移量，向右为正数 | number |
| anchorY | 纵向偏移量，向下为正数 | number |
polyline
指定一系列坐标点，从数组第一项连线至最后一项。
| 属性名 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] |
| color | 线的颜色 | string | 是 | 十六进制 |
| width | 线的宽度 | number | 否 | |
| dottedLine | 是否虚线 | boolean | 否 | 默认 false |
circle
在地图上显示圆
| 属性名 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| latitude | 纬度 | number | 是 | 浮点数，范围 -90 ~ 90 |
| longitude | 经度 | number | 是 | 浮点数，范围 -180 ~ 180 |
| color | 描边的颜色 | string | 是 | 十六进制 |
| fillColor | 填充颜色 | string | 是 | 十六进制 |
| radius | 半径 | number | 是 | |
| strokeWidth | 描边的宽度 | number | 否 |
polygon
指定一系列坐标点，根据 points 坐标数据生成闭合多边形
| 属性名 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| points | 经纬度数组 | array | 是 | [{latitude: 0, longitude: 0}] |
| strokeColor | 描边的颜色 | string | 是 | 十六进制 |
| fillColor | 填充颜色 | string | 是 | 十六进制 |
| strokeWidth | 描边的宽度 | number | 否 |
Bug & Tip
- tip：地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
- tip：Tuya MiniApp Tools 上是通过 WebView 模拟的与真机存在差异，请以真机效果为主。
- tip：相关原理请参考 基于异层渲染的原生组件。
- tip：请注意 原生组件使用限制。
👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。
示例代码
TYML
<view class="container"><mapid="myMap"class="myMap"style="border:10px solid red;padding: {{tagTop}}px;marginTop: {{marginTop}}px;"latitude="{{latitude}}"longitude="{{longitude}}"scale="{{scale}}"markers="{{markers}}"polyline="{{polyline}}"circles="{{circles}}"polygons="{{polygons}}"border-width="{{2}}"border-style="solid"border-color="#007aff"background-color="#ffc300"border-radius="{{10}}"data-map="{{value}}"bind:tap="handleTap"bind:markertap="handleMarkertap"bind:callouttap="handleCallouttap"bind:regionchange="handleRegionchange"><view class="tag1" bindtap="clickTag">标签一</view></map><view class="btn-box"><button class="btn" bindtap="changeLngLat" type="primary">设置经纬度</button><button class="btn" bindtap="apiMoveToLocation" type="primary">moveToLocation</button><button class="btn" bindtap="apiAddMarkers" type="primary">addMarkers</button><button class="btn" bindtap="apiRemoveMarkers" type="primary">removeMarkers</button><button class="btn" bindtap="scaleIn" type="primary">scale 放大</button><button class="btn" bindtap="scaleOut" type="primary">scale 缩小</button><button class="btn" bindtap="openConfirm" type="primary">显示弹窗</button><mpdialog title="标题" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}"><view>这里是内容，超过部分会自动换行换行。这里是内容，超过部分会自动换行换行</view></mpdialog></view>
</view>JS
const markers = [{id: 1,latitude: 39.908775,longitude: 116.406315,name: '王府井',iconPath: '/assets/images/marker.png',callout: {content: '王府井',color: '#ffffff',fontSize: 12,bgColor: '#5C91F6',padding: 4,borderRadius: 35,anchorY: -8,},},{id: 2,latitude: 39.927761,longitude: 116.391467,name: '北海公园',iconPath: '/assets/images/marker.png',callout: {content: '北海公园',color: '#ff0000',fontSize: 12,bgColor: '#fff',padding: 4,borderRadius: 35,anchorY: -8,},},{id: 3,latitude: 39.918203,longitude: 116.396923,name: '故宫',iconPath: '/assets/images/marker.png',callout: {content: '故宫',color: '#ffffff',fontSize: 12,bgColor: '#5C91F6',padding: 4,borderRadius: 35,anchorY: -8,},},
];Page({data: {latitude: 39.908775,longitude: 116.406315,scale: 12,markers: markers.slice(0, 2),tagTop: 20,height: 40,isShow: false,showDialog: false,buttons: [{text: '取消',},{text: '确定',},],marginTop: 10,value: 10,polyline:[{points:[{latitude: 39.907689,longitude: 116.16366,},{latitude: 39.91890,longitude: 116.193488},{latitude: 39.90900,longitude: 116.397787}],width: 2,borderColor:"#008000", // 绿色color:"#0000FF", // 蓝色dottedLine: false}],circles:[{latitude: 39.927761,longitude: 116.391467,color: "#800080", // 紫色fillColor: "#cccccccc",radius: 1000,strokeWidth: 2}],polygons:[{points:[{latitude: 39.908775,longitude: 116.406315,},{latitude: 39.927761,longitude: 116.481667},{latitude: 39.918203,longitude: 116.396923}],strokeWidth: 2,strokeColor:"#FF0000", // 红色fillColor:"#FFFF00", // 黄色}]},onReady: function () {this.mapCtx = ty.createMapContext('myMap');},openConfirm: function () {ty.nativeDisabled(true);this.setData({dialogShow: true,value: this.data.value + 10,});},changeLngLat: function (e) {if (this.data.latitude === 39.908775) {this.setData({latitude: 39.97334,longitude: 116.417403,});} else {this.setData({latitude: 39.908775,longitude: 116.406315,});}},scaleIn: function () {this.setData({scale: this.data.scale + 1,});},scaleOut: function () {this.setData({scale: this.data.scale - 1,});},changeMarkers: function () {this.setData({markers: markers,});},apiAddMarkers: function () {this.mapCtx.addMarkers({markers: [markers[2]],clear: false,success: (res) => {console.log('success addMarkers', res);},});},apiRemoveMarkers: function () {this.mapCtx.removeMarkers({markerIds: [1, 2, 3],success: (res) => {console.log('success removeMarkers', res);},});},apiMoveToLocation: function (e) {this.mapCtx.moveToLocation({longitude: '121.138398',latitude: '30.972688',success: (res) => {console.log('demo moveToLocation success 回调函数触发', res);},});},clickTag: function (e) {console.log('demo 热区标签 tap 事件触发', e);},handleMarkertap: function (e) {console.log('demo 地图 markertap 事件触发', e);},handleCallouttap: function (e) {console.log('demo 地图 callouttap 事件触发', e);},handleRegionchange: function (e) {console.log(e);},tapDialogButton(e) {ty.nativeDisabled(false);this.setData({dialogShow: false,});},
});JSON
{"navigationBarTitleText": "map","usingComponents": {"mpdialog": "@tuya-miniapp/miniapp-components-plus/dialog/index"}
}👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。
TYSS
.container {display: flex;align-items: center;flex-direction: column;padding: 0 20px 20px;
}.scrollBox {width: 100%;border: 2px solid green;overflow: hidden;padding: 10px;
}.myMap {height: 300px;width: 100%;margin-top: 50px;position: relative;
}.tag1 {width: 80px;height: 40px;background: yellowgreen;display: flex;justify-content: center;align-items: center;
}.btn-box {width: 100%;margin-top: 20px;display: flex;justify-content: space-between;flex-wrap: wrap;
}.btn {width: 160px;margin-bottom: 20px;display: inline-block;padding: 10px 20px;
}.box {background-color: darkorange;height: 200px;width: 100px;position: absolute;top: 150px;display: flex;justify-content: center;align-items: center;
}👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。
