Vue+高德高精度定位&IP定位+高德位置经纬度货车路线规划，实现实时路线规划

功能实现：实时获取当前位置，并规划到目的地的路线
实现思路：
1、定位当前位置，先精确定位，若精确定位失败则使用IP定位
2、渲染地图，规划路线
3、刷新当前位置，重新渲染路线规划

一、引入高德地图

在高德开放平台https://lbs.amap.com/api/javascript-api/guide/abc/prepare注册开发者账号并申请高德地图key
高德各种demo的地址为https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show
在index.html文件中引入

<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.15&key=“这里是你申请的key”'></script>

在webpack.base.conf.js中添加

externals: {
  'AMap': 'AMap'
}

在应用定位的.vue文件中添加

import AMap from 'AMap'

二、实现

var start   // 当前位置
var end     // 目的地
var path = [] // 路径对象数组
created () {
   
  // 初始
  // 传入目的地，获取目的地的经纬度  
  // end = 目的地经纬度
  this.getGeocode('深圳', '深圳市宝安区翻身地铁')
  // 定位当前位置，先精确定位，若精确定位失败在调用IP定位 self.getLngLatLocation()
  // start= 当前位置经纬度
  //定位成功，start不为空后并在该函数调用路线规划函数 
  //self.mapView()
  this.getLocation()
},
mounted () {
   
  //调用路线规划函数来绘制底层地图，使created中初始getLocation()定位未完成时，页面不会一片空白
  this.mapView()
  // 设置定时器，每分钟获取一次当前位置 
  if (this.timer) {
    
  clearInterval(this.timer)
  } else {
   
    this.timer = setInterval(() => {
   
      this.getLocation() / 定位当前位置 // start= 当前位置经纬度//并在该函数中调用路线规划函数 self.mapView()
      console.log('刷新了')
    }, 60 * 1000)
  }
},
be