支付宝小程序 UI·景区导航

本示例为景区导航快速示例，通过地图的基础包装组件，提供景区标志性地点的分类标记及导航功能。可用于各大景区、公园、广场的概览导航，帮助游客快速找到相关目的地。

使用说明

本示例为纯客户端代码，可直接在模拟器和在真机预览。

更多详情请参见 代码市场。

使用指南

安装

在 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 透明度。