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

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 返回值

视野改变时，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

1. tip：地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
2. tip：Tuya MiniApp Tools 上是通过 WebView 模拟的与真机存在差异，请以真机效果为主。
3. tip：相关原理请参考 基于异层渲染的原生组件。
4. tip：请注意 原生组件使用限制。

 

WebView

基础库 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

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