更新记录
1.0.0(2024-11-30)
下载此版本
第一个版本
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.06 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
le-find-path
使用方式
<le-find-path
ref="leFindPathRef"
:mapData="mapData"
:startPoi="startPoi"
:endPoi="endPoi"
@on-success="onSuccess"
@on-error="onError"
></le-find-path>
组件的属性说明如下:
属性 |
类型 |
默认值 |
必填 |
说明 |
mapData |
Array |
[] |
是 |
楼层地图配置信息(可跨楼层) |
color |
String |
'' |
否 |
16进制可通行道路的颜色 |
startPoi |
Object |
{} |
是 |
起点的坐标信息 |
endPoi |
Object |
{} |
是 |
终点的坐标信息 |
pathOption |
Object |
{} |
否 |
道路的配置信息 |
mapData参数说明:
属性 |
类型 |
必填 |
说明 |
url |
String |
是 |
地图图片地址 |
pois |
Array |
否 |
连接点信息 |
pois.id |
Number|String |
是 |
连接点唯一标识 |
pois.x |
Number |
是 |
x坐标 |
pois.y |
Number |
是 |
y坐标 |
pois.exit |
String |
否 |
点出口方向(top|right|bottom|left) |
pois.icon |
String |
是 |
图标路径 |
注:跨楼层的时候只允许mapData的数组长度为2,起点在索引0的地图上,终点在索引1的地图上,且连接点信息的id值与其他楼层的连接点要对应,否则会出现跨楼层寻路失败。
poiOption参数说明:
属性 |
类型 |
必填 |
说明 |
x |
Number |
是 |
x坐标 |
y |
Number |
是 |
y坐标 |
exit |
String |
否 |
点出口方向(top|right|bottom|left) |
icon |
String |
是 |
图标路径 |
pathOption参数说明:
属性 |
类型 |
默认值 |
必填 |
说明 |
stroke |
String |
#0066ff |
否 |
道路的颜色 |
strokeWidth |
Number |
8 |
否 |
道路的宽度 |
...... |
Object |
|
否 |
其余参数请参考fabric.js的Path属性 |
事件
事件名称 |
回调参数 |
说明 |
onSuccess |
(poiList1,poiList2) => void |
poiList1楼层0的路径坐标数组,poiList2楼层1的路径坐标数组 |
onError |
(code) => void |
异常事件 |
code码说明:
code |
说明 |
4000 |
寻路失败 |
4001 |
起点位置无道路可走 |
4002 |
终点位置无道路可走 |
4003 |
跨层位置无连接点可通行 |
5000 |
寻路异常 |
方法
方法名称 |
参数类型 |
说明 |
onSetShow |
Number |
根据楼层的索引值显示指定的楼层信息 |
注意
在缩放或拖拽地图的时候可能会出现整个网页下移所造成的卡断,请在页面或index.html设置如下css:
body {
overscroll-behavior-y: contain;
}