支付宝小程序 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 透明度。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号