<view> <view bindtap='getFormAddress'> 出发地：<input placeholder="出发地" type="text" bindinput="" value='{{markers[0].name}}' /> </view> <view bindtap='getToAddress'> 目的地：<input placeholder="目的地" type="text" bindinput="" value='{{markers[1].name}}' /> </view> <button bindtap = 'getSure'>确定</button> </view> <view wx:if="{{state==1}}"> <view> <map longitude="{{markers[0].longitude}}" latitude="{{markers[0].latitude}}" scale="12" markers="{{markers}}" polyline="{{polyline}}"></map> </view> <view> <view>{{distance}}</view> <view>{{cost}}</view> <view bindtouchstart="goDetail">详情</view> </view> </view>
location.wxss
.flex-style{ display: -webkit-box; display: -webkit-flex; display: flex; } .flex-item{ height: 35px; line-height: 35px; text-align: center; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1 } .flex-item.active{ color:#0091ff; } .map_title{ position:absolute; top: 10px; bottom: 110px; left: 0px; right: 0px; } .map_btn{ position:absolute; top: 120px; bottom: 220px; left: 0px; right: 0px; } .map_box{ position:absolute; top: 160px; bottom: 90px; left: 0px; right: 0px; } #navi_map{ width: 100%; height: 100%; } .text_box{ position:absolute; height: 90px; bottom: 0px; left: 0px; right: 0px; } .text_box .text{ margin: 15px; } .detail_button{ position:absolute; bottom: 30px; right: 10px; padding: 3px 5px; color: #fff; background: #0091ff; width:50px; text-align:center; border-radius:5px; }
点击详情跳转页，显示导航详细说明：
detail.js
var amapFile = require('../../libs/amap-wx.js'); var config = require('../../libs/config.js'); const app = getApp() Page({ data: { steps: {} }, onLoad: function () { var that = this; var key = config.Config.key; var myAmapFun = new amapFile.AMapWX({ key: key }); myAmapFun.getDrivingRoute({ origin: app.origin, destination: app.destination, success: function (data) { if (data.paths && data.paths[0] && data.paths[0].steps) { that.setData({ steps: data.paths[0].steps }); } }, fail: function (info) { } }) } })
detail.wxml
<view wx:for="{{steps}}" wx:for-item="i" wx:key="j"> {{i.instruction}} </view>
这只是个人的一个demo用例。仅做参考。其中还有很多瑕疵，不要介意哈。