旅游微信小程序设计内容,和设计路线

旅游微信小程序设计内容,和设计路线

如果对楼主有帮助，可以给个采纳不，谢谢啦



实现原理

通过map组件标记起始点和绘制路线图；

通过高德地图API获取不同类型的路线坐标点，以及耗费时间和路程。
WXML

<view class="flex-style">

 <view class="flex-item {{status == 'car' ? 'active' : ''}}" data-status="car" bindtouchstart="goTo">驾车</view>

 <view class="flex-item {{status == 'walk' ? 'active' : ''}}" data-status="walk" bindtouchstart="goTo">步行</view>

 <view class="flex-item {{status == 'bus' ? 'active' : ''}}" data-status="bus" bindtouchstart="goTo">公交</view>

 <view class="flex-item {{status == 'ride' ? 'active' : ''}}" data-status="ride" bindtouchstart="goTo">骑行</view></view><view class="map-inputtips-input">

 <input bindinput="bindInput" placeholder="输入终点" focus="true" /></view><view class="map-search-list {{isShow ? '' : 'map-hide'}}">

 <view bindtouchstart="bindSearch" wx:key="searchId" data-keywords="{{item.name}}" data-location="{{item.location}}" class="map-box" wx:for="{{tips}}">

   {{item.name}}

 </view></view><view class="map_box {{detailStatus ? 'active' : ''}}">

 <map id="navi_map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" include-points='{{points}}' markers="{{markers}}" polyline="{{polyline}}"></map></view><view class="text_box {{detailStatus ? '' : 'map-hide'}}">

 <view class="text">路程：{{distance}}米</view>

 <view class="text">耗时：{{cost}}分钟</view>

 <view class="detail_button" bindtouchstart="goDetail">详情</view></view>

旅行社在进行小程序开发的时候，要记住小程序是一种轻量级应用，应该尽可能的简单好用，抛弃以往琐碎的干扰因素。微信小程序开发结合门店信息和线上信息进行整合，为门店和用户搭建沟通的桥梁，通过交流接收用户的建议、反馈进行调整。                                                                      速成应用小程序开发平台编辑