支付宝小程序 UI·景区导航
2020-09-08 16:10 更新
本示例为景区导航快速示例,通过地图的基础包装组件,提供景区标志性地点的分类标记及导航功能。可用于各大景区、公园、广场的概览导航,帮助游客快速找到相关目的地。
使用说明
本示例为纯客户端代码,可直接在模拟器和在真机预览。
更多详情请参见 代码市场。
使用指南
安装
在 IDE 安装以下依赖
npm i mashi-open-snippets --save
注册
在 JSON 中引入组件路径
{
"usingComponents": {
"move-demo": "mashi-open-snippets/es/tab-list/index"
}
}
调用
分别在 AXML、JS、ACSS 中输入以下代码
<view class="atd-content">
<move-demo
id="map"
markers="{{markers}}"
mockLocation="{{true}}"
longitude="{{longitude}}"
latitude="{{latitude}}"
groundOverlays="{{groundOverlays}}"
controls="{{controls}}"
onControlTap="controltap"
markers="{{markers}}"
onMarkerTap="markertap"
polyline="{{polyline}}"
circles="{{circles}}"
onRegionChange="regionchange"
include-points="{{includePoints}} "
include-padding="{{includePadding}}"
polylineColor="{{polylineColor}}"
polylineWidth="{{polylineWidth}}"
polylineDottedLine="{{polylineDottedLine}}"
searchType="{{searchType}}"
routeColor="{{routeColor}}"
iconPath="{{iconPath}}"
iconWidth="{{iconWidth}}"
routeWidth="{{routeWidth}}"
city="{{city}}"
destinationCity="{{destinationCity}}"
anchorY="{{anchorY}}"
anchorX="{{anchorX}}"
alpha="{{alpha}}"
width="{{width}}"
height="{{height}}"
>
</move-demo>
</view>
import { mockMarkers } from './contstant';
const mockLongitude = 121.661702; // mock上海迪士尼位置经度
const mockLatitude = 31.141255; // mock上海迪士尼位置纬度
Page({
data: {
markers: mockMarkers,
longitude: mockLongitude, // 地图默认位置经度
latitude: mockLatitude, // 地图默认位置纬度
className: '', // 父级加入className
polylineColor: '#FF0000DD', // 路线颜色及透明度
polylineWidth: 5, // 路线宽度
polylineDottedLine: false, // 路线虚线还是实线
routeColor: '#FFB90F', // 导航路线颜色 10.1.50之后,该值仅在2d地图中生效
iconPath: 'https://gw.alipayobjects.com/mdn/rms_7a3c08/afts/img/A*xUaJQrQy0owAAAAAAAAAAABjARQnAQ', // 导航路线纹理 3d地图其优先级高于routeColor,即纹理会覆盖颜色值;10.1.50建议不再设置,在3d地图下提供了默认的纹理图案。
iconWidth: 10, // 导航纹理宽度 iconPath设置时才生效。10.1.50建议不再设置,在3d地图下提供了默认的纹理宽度。
routeWidth: 10, // 路线宽度 在不设置纹理时有效。 10.1.50建议不再设置,在2d地图下提供了默认值,3d不需要设置。。
alpha: 1.0, // markers透明度
},
});
.atd-content {
width: 100%;
}
属性
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
markers | Array | - | 否 | 基础地图组件 marks 参数。 |
mockLocation | Boolean | false | 否 | 是否 mock 当前位置。 |
longitude | String | - | 否 | 中心位置经度。 |
latitude | String | - | 否 | 中心位置纬度。 |
className | String | - | 否 | 父组件 class 名。 |
polyline | Array | [] | 否 | 连线(景点)。 |
polylineColor | String | - | 否 | 路线颜色及透明度。 |
polylineWidth | Number | - | 否 | 路线宽度。 |
polylineDottedLine | Boolean | false | 否 | 路线虚线还是实线。 |
routeColor | String | - | 否 | 导航路线颜色。基础库 10.1.50 之后,该值仅在 2D 地图中生效。 |
iconPath | String | - | 否 | 导航路线纹理。3D 地图中其优先级高于 routeColor,即纹理会覆盖颜色值;支付宝10.1.50 即以上版本建议不再设置,因为在 3D 地图下提供了默认的纹理图案。 |
iconWidth | Number | - | 否 | 导航纹理宽度。iconPath 设置时才生效。支付宝版本 10.1.50 及以上建议不再设置,因为在 3D 地图下提供了默认的纹理宽度。 |
routeWidth | Number | - | 否 | 路线宽度 。在不设置纹理时有效。 支付宝版本 10.1.50 及以上建议不再设置,在 2D 地图下提供了默认值,3D 不需要设置。 |
anchorY | Double | - | 否 | 经纬度在标注图标的锚点-竖向值。 |
anchorX | Double | - | 否 | 经纬度在标注图标的锚点-横向值。 |
alpha | Double | - | 否 | markers 透明度。 |
以上内容是否对您有帮助:
更多建议: