智能小程序 Ray 开发实操——地图组件和开放能力介绍

最新推荐文章于 2025-07-23 10:00:00 发布

原创最新推荐文章于 2025-07-23 10:00:00 发布 · 1.7k 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序 #开发语言 #App #物联网 #组件

Map

基础库 2.0.12 开始支持, 低版本需做兼容处理。

依赖 MapKit 插件, 插件版本 >= 2.2.2。

Tuya MiniApp Tools 上是通过 WebView 模拟的与真机存在差异，请以真机效果为主。

import { Map } from '@ray-js/ray';
import { createMapContext } from '@ray-js/api';

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。

地图。

相关 API：createMapContext。这是基于异层渲染的原生组件, 请注意原生组件使用限制。

属性名	类型	默认值	必填	说明
longitude	number		是	中心经度
latitude	number		是	中心纬度
scale	number	16	否	缩放级别，取值范围为 4-19
minScale	number	4	否	最小缩放级别
maxScale	number	19	否	最大缩放级别
markers	`Array<marker>`		否	标记点
polyline	`Array.<polyline>`		否	路线。IDE不支持, 请真机查看
circles	`Array.<circle>`		否	圆。IDE不支持, 请真机查看
polygons	`Array.<polygon>`		否	多边形。 IDE不支持, 请真机查看
borderWidth	number	0	否	边框的宽度, 单位 px
borderStyle	string	solid	否	边框的样式, 可选值: solid 和 dashed
borderColor	string	#ffffff	否	边框的颜色, 必须为十六进制格式
borderRadius	number	0	否	边框的圆角, 单位 px
borderRadiusTopLeft	number		否	边框的左上角圆角大小, 单位 px
borderRadiusTopRight	number		否	边框的右上角圆角大小, 单位 px
borderRadiusBottomLeft	number		否	边框的左下角圆角大小, 单位 px
borderRadiusBottomRight	number		否	边框的右下角圆角大小, 单位 px
backgroundColor	string	#ffffff	否	背景颜色, 必须为十六进制格式
onMarkertap	eventhandle		否	点击标记点时触发，e.detail = {markerId}
onCallouttap	eventhandle		否	点击标记点对应的气泡时触发 e.detail = {markerId}
onRegionchange	eventhandle		否	视野发生变化时触发。IDE不支持, 请真机查看
onInitdone	eventhandle		否	初始化完成时触发。IDE不支持, 请真机查看

视野改变时，regionchange 会触发两次，返回的 type 值分别为 begin 和 end。

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

属性名	说明	类型	必填	备注
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	否	默认为图片实际高度

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

在地图上显示圆

指定一系列坐标点，根据 points 坐标数据生成闭合多边形

基础库 2.6.0 开始支持, 低版本需做兼容处理。

import { WebView } from '@ray-js/ray';

承载网页的容器。会自动铺满整个小程序页面。

注意：当页面存在 web-view 标签时，其他标签将不展示，且不支持设置任何样式！

属性名	类型	必填	说明
src	string	否	webview 指向网页的链接。需登录小程序管理后台配置业务域名。
onMessage	eventhandle	否	网页向小程序 postMessage 时，触发并收到消息。e.detail = { data }
onLoad	eventhandle	否	网页加载成功时候触发此事件。e.detail = { src }
onError	eventhandle	否	网页加载失败的时候触发此事件。e.detail = { url, fullUrl }，其中 fullUrl 为加载失败时的完整 url