中小型网站设计哪家好,知名高端网站设计企业,wordpress关键词优化插件,省建设厅官网map 基础库 2.0.12 开始支持, 低版本需做兼容处理。 依赖 MapKit 插件, 插件版本 2.2.2。 Tuya MiniApp Tools 上是通过 WebView 模拟的与真机存在差异#xff0c;请以真机效果为主。 地图。相关 API#xff1a;ty.createMapContext。这是基于异层渲染的原生组件, 请注意…map 基础库 2.0.12 开始支持, 低版本需做兼容处理。 依赖 MapKit 插件, 插件版本 2.2.2。 Tuya MiniApp Tools 上是通过 WebView 模拟的与真机存在差异请以真机效果为主。 地图。相关 APIty.createMapContext。这是基于异层渲染的原生组件, 请注意 原生组。件使用限制。
下载智能生活 App 进行体验
Demo下载地址
属性说明
属性名类型默认值必填说明longitudenumber是中心经度latitudenumber是中心纬度scalenumber16否缩放级别取值范围为 4-19min-scalenumber4否最小缩放级别max-scalenumber19否最大缩放级别markersArraymarker否标记点polylineArray.polyline否路线。IDE不支持, 请真机查看circlesArray.circle否圆。IDE不支持, 请真机查看polygonsArray.polygon否多边形。 IDE不支持, 请真机查看border-widthnumber0否边框的宽度, 单位 pxborder-stylestringsolid否边框的样式, 可选值: solid 和 dashedborder-colorstring#ffffff否边框的颜色, 必须为十六进制格式border-radiusnumber0否边框的圆角, 单位 pxborder-radius-top-leftnumber否边框的左上角圆角大小, 单位 pxborder-radius-top-rightnumber否边框的右上角圆角大小, 单位 pxborder-radius-bottom-leftnumber否边框的左下角圆角大小, 单位 pxborder-radius-bottom-rightnumber否边框的右下角圆角大小, 单位 pxbackground-colorstring#ffffff否背景颜色, 必须为十六进制格式bind:markertapeventhandle否点击标记点时触发e.detail {markerId}bind:callouttapeventhandle否点击标记点对应的气泡时触发 e.detail {markerId}bind:regionchangeeventhandle否视野发生变化时触发。IDE不支持, 请真机查看bind:initdoneeventhandle否初始化完成时触发。IDE不支持, 请真机查看
regionchange 返回值
视野改变时regionchange 会触发两次返回的 type 值分别为 begin 和 end。
marker
标记点用于在地图上显示标记的位置。
属性名说明类型必填备注id标记点 IDnumber是marker 点击事件回调会返回此 id。 id应不大于 2^32longitude经度number是浮点数范围 -180 ~ 180latitude纬度number是浮点数范围 -90 ~ 90title标注点名string否点击时显示callout 存在时将被忽略styleId气泡样式类型 IDstring否由原生实现的 marker 样式类型 idcallout标记点上方的气泡窗口数据源object否支持的属性见下表可识别换行符。存在 styleId 时根据所选样式类型传入属性iconPath显示的图标string是项目目录下的图片路径支持网络路径、代码包路径rotate旋转角度number否顺时针旋转的角度范围 0 ~ 360默认为 0width标注图标宽度number/string否默认为图片实际宽度height标注图标高度number/string否默认为图片实际高度
marker 上的气泡 callout
属性名说明类型content文本stringcolor文本颜色stringfontSize文字大小numberborderRadius边框圆角numberborderWidth边框宽度numberborderColor边框颜色stringbgColor背景色stringpadding文本边缘留白numbertextAlign文本对齐方式。有效值: left, right, centerstringanchorX横向偏移量向右为正数numberanchorY纵向偏移量向下为正数number
polyline
指定一系列坐标点从数组第一项连线至最后一项。
属性名说明类型必填备注points经纬度数组array是[{latitude: 0, longitude: 0}]color线的颜色string是十六进制width线的宽度number否dottedLine是否虚线boolean否默认 false
circle
在地图上显示圆
属性名说明类型必填备注latitude纬度number是浮点数范围 -90 ~ 90longitude经度number是浮点数范围 -180 ~ 180color描边的颜色string是十六进制fillColor填充颜色string是十六进制radius半径number是strokeWidth描边的宽度number否
polygon
指定一系列坐标点根据 points 坐标数据生成闭合多边形
属性名说明类型必填备注points经纬度数组array是[{latitude: 0, longitude: 0}]strokeColor描边的颜色string是十六进制fillColor填充颜色string是十六进制strokeWidth描边的宽度number否
Bug Tip
tip地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。tipTuya MiniApp Tools 上是通过 WebView 模拟的与真机存在差异请以真机效果为主。tip相关原理请参考 基于异层渲染的原生组件。tip请注意 原生组件使用限制。 立即免费领取开发资源体验涂鸦 MiniApp 小程序开发。
示例代码
TYML view classcontainermapidmyMapclassmyMapstyleborder: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-stylesolidborder-color#007affbackground-color#ffc300border-radius{{10}}data-map{{value}}bind:taphandleTapbind:markertaphandleMarkertapbind:callouttaphandleCallouttapbind:regionchangehandleRegionchangeview classtag1 bindtapclickTag标签一/view/mapview classbtn-boxbutton classbtn bindtapchangeLngLat typeprimary设置经纬度/buttonbutton classbtn bindtapapiMoveToLocation typeprimarymoveToLocation/buttonbutton classbtn bindtapapiAddMarkers typeprimaryaddMarkers/buttonbutton classbtn bindtapapiRemoveMarkers typeprimaryremoveMarkers/buttonbutton classbtn bindtapscaleIn typeprimaryscale 放大/buttonbutton classbtn bindtapscaleOut typeprimaryscale 缩小/buttonbutton classbtn bindtapopenConfirm typeprimary显示弹窗/buttonmpdialog title标题 show{{dialogShow}} bindbuttontaptapDialogButton 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 小程序开发。
