腾讯地图手把手教你实现微信小程序路线规划

# 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli@2.9

# 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

{
  "pages": [
    "pages/citylist/main",
    "pages/citydetail/main"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#eee",
    "navigationBarTitleText": "全球地铁，全程为你",
    "navigationBarTextStyle": "black"
  }
}

<map
  id="citymap"
  name="citymap"
  :longitude="lng"
  :latitude="lat"
  :polyline="polyline"
	:markers="markers"
  scale="12"
  :subkey="YOUR_OWN_QQMAP_KEY"
  show-location
  show-compass
  enable-rotate
  style="width: 100%; height: 100%;"
>
  <cover-view class="map-cover-view">
    <button class="explore-btn" type="primary" @tap="exploreCity">查看旅游攻略</button>
  </cover-view>
</map>

import config from '@/config'
import QQMapWX from '../../assets/lib/qqmap-wx-jssdk.js' // 这里用未压缩版的代码
const QQMapSDK = new QQMapWX({
  key: config.qqMapKey || ''
})

// 坐标从上一页query传进来，坐标为浮点数，可通过geocoder接口获取
this.fromLocation = {
  latitude: +query.from.split(',')[0] || -1,
  longitude: +query.from.split(',')[1] || -1
}

this.toLocation = {
  latitude: +query.to.split(',')[0] || -1,
  longitude: +query.to.split(',')[1] || -1
}

// 查询地图路线
queryMapRoutine() {
  QQMapSDK.direction({
    mode: 'transit', // 'transit'(公交路线规划)
    // from参数不填默认当前地址
    from: this.fromLocation,
    to: this.toLocation,
    success: (res) => {
      console.log('路线规划结果', res);
      let routes = res.result.routes;
      this.routes = routes.map(r => {
				// 对每一种路线方案，分别进行解析
        return this.parseRoute(r)
      })
      console.log('parsed routes', this.routes)
    }
  })
}

// 解析路线，包括距离，时间，描述，路线，起止点等
parseRoute(route) {
	let result = {}
	// 出发时间
  result.setOutTime = formatTime(new Date())
  result.distance = route.distance < 1000 ?
                    `${route.distance}米` :
                    `${(route.distance / 1000).toFixed(2)}公里`
  result.duration = route.duration < 60 ?
                    `${route.duration}分钟` :
                    `${parseInt(route.duration / 60)}小时${route.duration % 60}分钟`
	result.desc = []
	// 每一个路线分很多步，如先步行，后乘公交，再搭地铁等
  route.steps.forEach(step => {
    // if (step.mode == 'WALKING' && step.distance > 0) {
    //   result.desc.push(`向${step.direction}步行${step.distance}米`)
    // }
    if (step.mode == 'TRANSIT' && step.lines[0]) {
      let line = step.lines[0]
      if (line.vehicle == 'BUS') line.title = `公交车-${line.title}`
      if (line.vehicle == 'RAIL') line.title = `铁路`
      result.desc.push(`${line.title}: ${line.geton.title} —> ${line.getoff.title}，途经 ${line.station_count} 站。`)
    }
  })
  result.polyline = []
  result.points = []
  //获取各个步骤的polyline，也就是路线图
  for(let i = 0; i < route.steps.length; i++) {
    let step = route.steps[i]
    let polyline = this.getStepPolyline(step)
    if (polyline) {
      result.points = result.points.concat(polyline.points)
      result.polyline.push(polyline)
    }
	}
	// 标记路线整体显示坐标
  this.getStepPolyline.colorIndex = 0
  let midPointIndex = Math.floor(result.points.length / 2)
  result.latitude = result.points[midPointIndex].latitude
  result.longitude = result.points[midPointIndex].longitude
  // 标记路线起止点
  let startPoint = result.points[0]
  let endPoint = result.points[result.points.length - 1]
  result.markers = [
    {
      iconPath: this.startIcon,
      id: 0,
      latitude: startPoint.latitude,
      longitude: startPoint.longitude,
      width: 28,
      height: 28,
      zIndex: -1,
      anchor: {x: 0.5, y: 1}
    },
    {
      iconPath: this.endIcon,
      id: 1,
      latitude: endPoint.latitude,
      longitude: endPoint.longitude,
      width: 28,
      height: 28,
      zIndex: -1,
      anchor: {x: 0.5, y: 1}
    }
  ]
  return result
},

getStepPolyline(step) {
	let coors = [];
	// 随机颜色
  let colorArr = ['#1aad19', '#10aeff', '#d84e43']
  let _dottedLine = true
  if (step.mode == 'WALKING' && step.polyline) {
    coors.push(step.polyline);
    _dottedLine = false
  } else if (step.mode == 'TRANSIT' && step.lines[0].polyline) {
    coors.push(step.lines[0].polyline);
  } else {
    return null
  }
  //坐标解压（返回的点串坐标，通过前向差分进行压缩）
  let kr = 1000000;
  for (let i = 0 ; i < coors.length; i++){
    for (let j = 2; j < coors[i].length; j++) {
      coors[i][j] = Number(coors[i][j - 2]) + Number(coors[i][j]) / kr;
    }
  }
  //定义新数组，将coors中的数组合并为一个数组
  let coorsArr = [];
  let _points = [];
  for (let i = 0 ; i < coors.length; i ++){
    coorsArr = coorsArr.concat(coors[i]);
  }
  //将解压后的坐标放入点串数组_points中
  for (let i = 0; i < coorsArr.length; i += 2) {
    _points.push({ latitude: coorsArr[i], longitude: coorsArr[i + 1] })
  }
  if (!this.getStepPolyline.colorIndex) {
    this.getStepPolyline.colorIndex = 0
  }
  let colorIndex = this.getStepPolyline.colorIndex % colorArr.length
	this.getStepPolyline.colorIndex++
	// 最终polyline结果
  let polyline = {
    width: 7,
    points: _points,
    color: colorArr[colorIndex],
    dottedLine: _dottedLine,
    arrowLine: true, // 带箭头的线, 开发者工具暂不支持该属性
    borderColor: '#fff',
    borderWidth: 1
  }
  return polyline
}

广州火车站 -> 广州塔
9.88km 30分钟
地铁5号线 广州火车站 -> 珠江新城，途径7站
地铁3号线 珠江新城 -> 广州塔，途径1站

<map
  id="citymap"
  name="citymap"
  :latitude="currentRoute.latitude"
  :longitude="currentRoute.longitude"
  :polyline="currentRoute.polyline"
  :markers="currentRoute.markers"
  scale="12"
  :subkey="qqMapKey"
  show-location
  show-compass
  enable-rotate
  style="width: 100%; height: 100%;"
></map>