项目实训（二十四）——小程序导航的实现

一、目的：

我们的小程序还设计了导航功能，方便用户可以实现从当前的定位到达目标地点的功能。这里我们确定目的地为省立医院，然后从当前位置进行导航。

二、实现过程：
首先我们需要高德地图SDK

并且要获取高德地图的SDK。获取完高德地图的KEY，我们就可以将其运用于我们小程序的开发当中了。

这里因为我们进行了路线规划，因此分为三种出行方式，分别是打车、步行以及公交车。

我们先来看看我们的页面文件wxml的编写。

map.wxml:

<view class="flex-style">

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

  <view class="flex-item" 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>

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

}

map.js:

// 引入高德地图 SDK

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

Page({

  data: {

    distance: '',

    cost: '',

    polyline: [],

    userLatitude: '',

    userLongitude: ''

  },

  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}`;

        console.log(origin)

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

        wx.setStorageSync('origin', origin);

        wx.setStorageSync('destination', destination);

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

        myAmapFun.getDrivingRoute({

          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.taxi_cost){

              that.setData({

                cost: '打车约' + parseInt(data.taxi_cost) + '元'

              });

            }

          },

          fail: function(info){

            console.log(info);

          }

        })

      },

      fail: function(err) {

        console.error('获取定位失败:', err);

        wx.showToast({

          title: '获取定位失败',

          icon: 'none'

        });

      }

    });

  },

  goDetail: function(){

    wx.navigateTo({

      url: '../car_detail/car_detail?origin=${origin}&destination=${destination}'

    })

  },

  goToCar: function (e) {

    wx.redirectTo({

      url: '../map/map'

    })

  },

  goToBus: function (e) {

    wx.redirectTo({

      url: '../bus/bus'

    })

  },

  goToWalk: function (e) {

    wx.redirectTo({

      url: '../walk/walk'

    })

  }

})

 比较重要的就是这个map.js了，首先我们应该通过微信的接口wx.getLocation获取用户当前定位并进行存储。

因为我们的目标地点是确定的所以我们可以固定经纬度，直接调用去获取路线规划。

实现效果：