功能分析

获取用户当前的位置
获取当前位置到目的地的路线规划
切换步行、骑行、驾车三种切换
调用第三方导航

效果图如下:

代码部分

html部分

<view>
            <view class="map-wrapper">
                <map :latitude="latitude" scale="12" :longitude="longitude" :markers="markers" :polyline="polyline" ></map>
                <view class="info-wrapper">
                    <view class="selectType">
                        <view @click="goTo('car')" class="type" :class="active === 'car' ? 'active' : ''">驾车</view>
                        <view @click="goTo('walk')" class="type" :class="active === 'walk' ? 'active' : ''">步行</view>
                        <view @click="goTo('ride')" class="type" :class="active === 'ride' ? 'active' : ''">骑行</view>
                    </view>
                    <view class="navigatePic" @click="handleNavigate">导航</view>
                    <view v-if="maxDuration && active!=='car'" class="info">
                        <text>距离太远，请选择合适的方式前往</text>
                    </view>
                    <view v-else class="info">
                        <text>{{duration | formatTime}}小时</text>
                        <text>{{distance | filterDistance}}公里</text>
                    </view>
                </view>
            </view>
        </view>
    </view>

JS部分

数据部分

// 第一步: 需要引用高德导航的js文件
import amapFile from './amap-wx.js';
data() {
        return {
            title: 'map',
            latitude: xxx, // 目的地的位置
            longitude: xxx, // 目的地的位置
            key: 'c290b7e016c85e8f279b2f80018c6fbf', // 高德导航的key
            distance: 0,
            duration: 0,
            maxDuration: false,
            curentLatitude: '',
            curentLongitude: '',
            active: 'car',
            polyline: null,
            markers: [{
                latitude: 28.193688,
                longitude: 113.010925,
                // iconPath: '地图的标注icon',
                title:'xxx',
                label:{
                    content:'xxx',
                    color:'#F76350',
                    bgColor:'#fff',
                    padding:5,
                    borderRadius:4
                },
                callout:{
                    content:'xxx',
                    color:'#F76350',
                    fontSize:12
                }
            }, {
                latitude: 28.188597,
                longitude: 113.006853,
                // iconPath: '地图的标注icon',
                title:'您的位置',
                label:{
                    content:'您的位置',
                    color:'#F76350',
                    bgColor:'#fff',
                    padding:5,
                    borderRadius:4
                },
                callout:{
                    content:'您的位置',
                    color:'#F76350',
                    fontSize:12    
                }
            }]
        }
    },

页面加载的时候执行的方法

// 获取当前用户的位置
uni.getLocation({
    type: 'gcj02',
    success: (res) => {
        // 这里给你的位置赋值
        this.markers[1].latitude = res.latitude;
        this.markers[1].longitude = res.longitude;
        this.currentLatitude = res.latitude;
        this.currentLongitude = res.longitude;
    },
    fail: function() {
        console.log('fail')
    },
    complete: () => {
        // 默认调用开车方式
        this.goTo('car')
    }
})

绘制路线相关代码

drawPolyline(self,color){
    return {
      origin: this.longitude + ',' + this.latitude,
      destination: this.currentLongitude +',' +this.currentLatitude,
      success(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])
              })
            }
          }
        }
        self.distance= data.paths[0].distance;
        if(data.paths[0].distance / 1000 > 50) {
            self.maxDuration = true;
        } else {
            self.maxDuration = false;
        }
        self.duration= parseInt(data.paths[0].duration/60),
        self.polyline= [{
            points: points,
            color: color,
            width: 6,
            arrowLine: true
        }]
        
      },
      fail(e) {
          console.log(e)
      },
      complete() {
          console.log('complate')
      }
    }
  },
  
  getPolyline(_type){
    var amap = new amapFile.AMapWX({ key: this.key });
    var self = this;
    switch (_type){
      case 'car':
        amap.getDrivingRoute(this.drawPolyline(this,"#0091ff"));
        break;
      case 'walk':
        if(this.maxDuration) {
            return false;
        }
        amap.getWalkingRoute(this.drawPolyline(this, "#1afa29"));
        break;
      case 'ride':
        if(this.maxDuration) {
            return false;
        }
        amap.getRidingRoute(this.drawPolyline(this, "#1296db"));
        break;
      default:
        return false;
    }
  },

最后点击切换方式时调用方法

goTo(_type){
    this.getPolyline(_type);
    this.active = _type;
  }

我是海明月，前端小学生。

我的千日蜕变计划正式启动，希望您能够监督我执行。谢谢。

如果有不对的地方，也希望大佬指正。

完整代码如下

<template>
    <view>
        <!-- <page-head :title="title"></page-head> -->
        <view class="uni-common-mt">
            <view>
                <view class="map-wrapper">
                    <map :latitude="latitude" scale="12" :longitude="longitude" :markers="markers" :polyline="polyline" ></map>
                    <view class="info-wrapper">
                        <view class="selectType">
                            <view @click="goTo('car')" class="type" :class="active === 'car' ? 'active' : ''">驾车</view>
                            <view @click="goTo('walk')" class="type" :class="active === 'walk' ? 'active' : ''">步行</view>
                            <view @click="goTo('ride')" class="type" :class="active === 'ride' ? 'active' : ''">骑行</view>
                        </view>
                        <view class="navigatePic" @click="handleNavigate">导航</view>
                        <view v-if="maxDuration && active!=='car'" class="info">
                            <text>距离太远，请选择合适的方式前往</text>
                        </view>
                        <view v-else class="info">
                            <text>{{duration | formatTime}}小时</text>
                            <text>{{distance | filterDistance}}公里</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    import amapFile from './amap-wx.js';
    export default {
        data() {
            return {
                title: 'map',
                // latitude: 31.886143, // 万达的位置
                // longitude: 117.344212, // 万达管家的位置
                latitude: 28.193688, // 白白管家的位置
                longitude: 113.010925, // 白白管家的位置
                key: 'c290b7e016c85e8f279b2f80018c6fbf',
                distance: 0,
                duration: 0,
                maxDuration: false,
                curentLatitude: '',
                curentLongitude: '',
                active: 'car',
                polyline: null,
                markers: [{
                    latitude: 28.193688,
                    longitude: 113.010925,
                    // iconPath: '../../static/location@3x.png',
                    title:'白白管家',
                    label:{
                        content:'白白管家',
                        color:'#F76350',
                        bgColor:'#fff',
                        padding:5,
                        borderRadius:4
                    },
                    callout:{
                        content:'白白管家',
                        color:'#F76350',
                        fontSize:12
                    }
                }, {
                    latitude: 28.188597,
                    longitude: 113.006853,
                    // iconPath: '../../static/location@3x.png',
                    title:'您的位置',
                    label:{
                        content:'您的位置',
                        color:'#F76350',
                        bgColor:'#fff',
                        padding:5,
                        borderRadius:4
                    },
                    callout:{
                        content:'您的位置',
                        color:'#F76350',
                        fontSize:12    
                    }
                }]
            }
        },
        onLoad() {
            console.log('amapFile', amapFile)
            uni.getLocation({
                type: 'gcj02',
                success: (res) => {
                    this.markers[1].latitude = res.latitude;
                    this.markers[1].longitude = res.longitude;
                    this.currentLatitude = res.latitude;
                    this.currentLongitude = res.longitude;
                },
                fail: function() {
                    console.log('fail')
                },
                complete: () => {
                    this.goTo('car')
                }
            })
        },
        methods: {
            handleNavigate() {
                uni.openLocation({
                    latitude: this.latitude,
                    longitude: this.longitude,
                    name: '白白管家',
                    address: '长沙火车站对面',
                    success: function () {
                        console.log('success');
                    }
                });
            },
            drawPolyline(self,color){
                return {
                  origin: this.longitude + ',' + this.latitude,
                  destination: this.currentLongitude +',' +this.currentLatitude,
                  success(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])
                          })
                        }
                      }
                    }
                    self.distance= data.paths[0].distance;
                    console.log(data.paths[0].distance / 1000 > 50)
                    console.log(self.active !== 'car')
                    if(data.paths[0].distance / 1000 > 50) {
                        self.maxDuration = true;
                    } else {
                        self.maxDuration = false;
                    }
                    self.duration= parseInt(data.paths[0].duration/60),
                    self.polyline= [{
                        points: points,
                        color: color,
                        width: 6,
                        arrowLine: true
                    }]
                    
                  },
                  fail(e) {
                      console.log(e)
                  },
                  complete() {
                      console.log('complate')
                  }
                }
              },
              getPolyline(_type){
                var amap = new amapFile.AMapWX({ key: this.key });
                var self = this;
                switch (_type){
                  case 'car':
                    amap.getDrivingRoute(this.drawPolyline(this,"#0091ff"));
                    break;
                  case 'walk':
                    if(this.maxDuration) {
                        return false;
                    }
                    amap.getWalkingRoute(this.drawPolyline(this, "#1afa29"));
                    break;
                  case 'ride':
                    if(this.maxDuration) {
                        return false;
                    }
                    amap.getRidingRoute(this.drawPolyline(this, "#1296db"));
                    break;
                  default:
                    return false;
                }
              },
              goTo(_type){
                this.getPolyline(_type);
                this.active = _type;
              }
        },
        filters: {
            filterDistance(val) {
                return (val/1000).toFixed(2)
            },
            formatTime(val) {
                return (val/60).toFixed(2)
            }
        }
    }
</script>
<style>
    .map-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 150upx;
        width: 100%;
    }
    .map-wrapper map {
        width: 100%;
        height: 100%;
    }
    .info-wrapper{
        background: #fff;
        height: 150upx;
        display: flex;
        flex-direction: column;
    }
    .selectType {
        position: relative;
        display: flex;
    }
    .selectType view {
        flex: 1;
        height: 60upx;
        line-height: 60upx;
        text-align: center;
    }
    .type {
        border-bottom: 1px solid #ccc;
    }
    .type:last-child {
        border-right: none;
    }
    .type.active {
        color: #10D5AF;
        border-color: #10D5AF;
    }
    .navigatePic {
        position: absolute;
        right: 10upx;
        background: #10D4AF;
        width: 100upx;
        height: 100upx;
        border-radius: 50%;
        bottom:40upx;
        text-align:center;
        line-height:100upx;
        color:#fff;
        font-weight:bold;
    }
    .info {
        display: flex;
        flex-direction: row;
        line-height: 80upx;
        font-size:32upx;
        font-weight:bold;
        padding:20upx;
    }
    .info text {
        margin-right: 40upx;
    }
</style>