支付寶小程序 UI·景區(qū)導(dǎo)航

本示例為景區(qū)導(dǎo)航快速示例，通過地圖的基礎(chǔ)包裝組件，提供景區(qū)標(biāo)志性地點(diǎn)的分類標(biāo)記及導(dǎo)航功能?？捎糜诟鞔缶皡^(qū)、公園、廣場(chǎng)的概覽導(dǎo)航，幫助游客快速找到相關(guān)目的地。

使用說明

本示例為純客戶端代碼，可直接在模擬器和在真機(jī)預(yù)覽。

更多詳情請(qǐng)參見 代碼市場(chǎng)。

使用指南

安裝

在 IDE 安裝以下依賴

npm i mashi-open-snippets --save

注冊(cè)

在 JSON 中引入組件路徑

{
  "usingComponents": {
    "move-demo": "mashi-open-snippets/es/tab-list/index"
  }
}

調(diào)用

分別在 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上海迪士尼位置經(jīng)度
const mockLatitude = 31.141255; // mock上海迪士尼位置緯度
Page({
  data: {
    markers: mockMarkers,
    longitude: mockLongitude, // 地圖默認(rèn)位置經(jīng)度
    latitude: mockLatitude, // 地圖默認(rèn)位置緯度
    className: '', // 父級(jí)加入className
    polylineColor: '#FF0000DD', // 路線顏色及透明度
    polylineWidth: 5, // 路線寬度
    polylineDottedLine: false, // 路線虛線還是實(shí)線
    routeColor: '#FFB90F', // 導(dǎo)航路線顏色 10.1.50之后，該值僅在2d地圖中生效
    iconPath: 'https://gw.alipayobjects.com/mdn/rms_7a3c08/afts/img/A*xUaJQrQy0owAAAAAAAAAAABjARQnAQ', // 導(dǎo)航路線紋理 3d地圖其優(yōu)先級(jí)高于routeColor，即紋理會(huì)覆蓋顏色值；10.1.50建議不再設(shè)置，在3d地圖下提供了默認(rèn)的紋理圖案。
    iconWidth: 10, // 導(dǎo)航紋理寬度 iconPath設(shè)置時(shí)才生效。10.1.50建議不再設(shè)置，在3d地圖下提供了默認(rèn)的紋理寬度。
    routeWidth: 10, // 路線寬度  在不設(shè)置紋理時(shí)有效。 10.1.50建議不再設(shè)置，在2d地圖下提供了默認(rèn)值，3d不需要設(shè)置。。
    alpha: 1.0, // markers透明度
  },
});

.atd-content {
  width: 100%;
}

屬性