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

最新推荐文章于 2023-12-19 17:35:29 发布

Cici_cclu

最新推荐文章于 2023-12-19 17:35:29 发布

阅读量4k

点赞数 3

分类专栏： Vue移动端 JavaScript 文章标签： Vue 高德定位高德路线规划

本文链接：https://blog.csdn.net/qq_41836598/article/details/102608591

版权

本文介绍了如何利用Vue和高德地图API进行实时定位和路线规划。首先通过注册高德开发者账号获取API Key，然后在项目中引入高德地图，实现精确定位和IP定位功能。当精确定位失败时，自动切换到IP定位。接着，展示如何在地图上规划路线，并更新当前位置。在实际测试中，建议在手机上进行以获取更精确的GPS定位。

摘要由CSDN通过智能技术生成

功能实现：实时获取当前位置，并规划到目的地的路线
实现思路：
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)
  }
},