项目实训(二十五）——步行导航与公交导航的实现

步行导航和公交导航其实方法与乘车导航方法类似，这里我们就做简单的代码讲解。

walk.wxml

<view class="flex-style">

  <view class="flex-item " bindtouchstart="goToCar">驾车</view>

  <view class="flex-item active" bindtouchstart="goToWalk">步行</view>

  <view class="flex-item" bindtouchstart="goToBus">公交</view>

</view>

<view class="map_box">

  <map id="navi_map" longitude="117.121787" latitude="36.662872" scale="12" markers="{{markers}}" polyline="{{polyline}}"></map>

</view>

<view class="text_box">

  <view class="text">{{distance}}</view>

  <view class="text">{{cost}}</view>

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

</view>

 要注意把flex-item active切换成步行，我们上一个是驾车。

walk.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_box{

  position:absolute;

  top: 35px;

  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;

}

 walk.js:

var amapFile = require('../../components/amap-wx.130.js');

Page({

  data: {

  

    distance: '',

    cost: '',

    polyline: []

  },

  onLoad: function() {

    var that = this;

    wx.getLocation({

      type: 'gcj02',

      success: function(res) {

        that.setData({

          userLatitude: res.latitude,

          userLongitude: res.longitude,

          markers: [{

            iconPath: "../../images/地址.png",

            id: 0,

            latitude: res.latitude,

            longitude: res.longitude,

            width: 23,

            height: 33

          },{

            iconPath: "../../images/地址.png",

            id: 1,

            latitude: 36.662872,

            longitude: 117.121787,

            width: 23,

            height: 33

          }]

        });

        // 设置用户当前位置为起点

        var origin = `${res.longitude},${res.latitude}`;

        var destination = '117.121787,36.662872'; // 目标位置

        var myAmapFun = new amapFile.AMapWX({key: ''});

    myAmapFun.getWalkingRoute({

      origin: origin,

      destination: destination,

      success: function(data){

        var points = [];

        if(data.paths && data.paths[0] && data.paths[0].steps){

          var steps = data.paths[0].steps;

          for(var i = 0; i < steps.length; i++){

            var poLen = steps[i].polyline.split(';');

            for(var j = 0;j < poLen.length; j++){

              points.push({

                longitude: parseFloat(poLen[j].split(',')[0]),

                latitude: parseFloat(poLen[j].split(',')[1])

              })

            } 

          }

        }

        that.setData({

          polyline: [{

            points: points,

            color: "#0091ff",

            width: 6

          }]

        });

        if(data.paths[0] && data.paths[0].distance){

          that.setData({

            distance: data.paths[0].distance + '米'

          });

        }

        if(data.paths[0] && data.paths[0].duration){

          that.setData({

            cost: parseInt(data.paths[0].duration/60) + '分钟'

          });

        }

          

      },

      fail: function(info){

      }

    })

  }

})

  },

  goDetail: function(){

    wx.navigateTo({

      url: '../walk_detail/walk_detail'

    })

  },

  goToCar: function (e) {

    wx.redirectTo({

      url: '../map/map'

    })

  },

  goToBus: function (e) {

    wx.redirectTo({

      url: '../bus/bus'

    })

  },

  

  goToWalk: function (e) {

    wx.redirectTo({

      url: '../walk/walk'

    })

  }

})

这里walk.js与 map.js的区别在于我们更换了查询路径的方法。

实现效果：

bus.wxml:
 

<view class="flex-style">

  <view class="flex-item" bindtouchstart="goToCar">驾车</view>

  <view class="flex-item" bindtouchstart="goToWalk">步行</view>

  <view class="flex-item active" bindtouchstart="goToBus">公交</view>

</view>

<view class="map_box">

  <map id="navi_map" longitude="117.121787" latitude="36.662872" scale="12" markers="{{markers}}" polyline="{{polyline}}"></map>

</view>

 

<view class="text_box" wx:for="{{transits}}" wx:for-item="i">

  <text class="text_item" wx:for="{{i.transport}}" wx:for-item="j">

    {{j}}

  </text>

</view>

bus.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;

}

.text_box{

  margin: 0 15px;

  padding: 15px 0;

  border-bottom: 1px solid #c3c3c3;

  font-size: 13px;

}

.text_box .text_item{display:inline-block;line-height: 8px;}

 bus.js:

var amapFile = require('../../components/amap-wx.130.js');

Page({

  data: {

    

    distance: '',

    cost: '',

    transits: [],

    polyline: []

  },

  onLoad: function() {

    var that = this;

    // 获取用户当前位置

    wx.getLocation({

      type: 'gcj02',

      success: function(res) {

        that.setData({

          userLatitude: res.latitude,

          userLongitude: res.longitude,

          markers: [{

            iconPath: "../../images/地址.png",

            id: 0,

            latitude: res.latitude,

            longitude: res.longitude,

            width: 23,

            height: 33

          },{

            iconPath: "../../images/地址.png",

            id: 1,

            latitude: 36.662872,

            longitude: 117.121787,

            width: 23,

            height: 33

          }]

        });

        // 设置用户当前位置为起点

        var origin = `${res.longitude},${res.latitude}`;

        var destination = '117.121787,36.662872'; // 目标位置

        var myAmapFun = new amapFile.AMapWX({key: ''});

    myAmapFun.getTransitRoute({

      origin: origin,

      destination: destination,

      city: '济南',

      success: function(data){

        console.log(data)

        if(data && data.transits){

          var transits = data.transits;

          for(var i = 0; i < transits.length; i++){

            var segments = transits[i].segments;

            transits[i].transport = [];

            for(var j = 0; j < segments.length; j++){

              if(segments[j].bus && segments[j].bus.buslines && segments[j].bus.buslines[0] && segments[j].bus.buslines[0].name){

                var name = segments[j].bus.buslines[0].name

                if(j!==0){

                  name = '--' + name;

                }

                transits[i].transport.push(name);

              }

            }

          }

        }

        that.setData({

          transits: transits

        });

          

      },

      fail: function(info){

      }

    })

  }

})

  },

  goToCar: function (e) {

    wx.redirectTo({

      url: '../map/map'

    })

  },

  goToBus: function (e) {

    wx.redirectTo({

      url: '../bus/bus'

    })

  },

  

  goToWalk: function (e) {

    wx.redirectTo({

      url: '../walk/walk'

    })

  }

})

 这里bus调用的是getTransitRoute

实现效果图：