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

Vue移动端 同时被 2 个专栏收录
17 篇文章 0 订阅
5 篇文章 0 订阅

功能实现:实时获取当前位置,并规划到目的地的路线
实现思路:
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)
  }
},
beforeDestroy () {
  // 页面销毁时,清除定时器
  clearInterval(this.timer)
}

三、具体函数

路线规划函数

mapView () {
  var map = new AMap.Map('mapContainer', {})
  var truckOptions = {
    map: map,
    policy: 0,
    size: 1,
    city: 'beijing',
    panel: 'panel'
  }
  var driving
  AMap.plugin('AMap.TruckDriving', function () { // 异步
    driving = new AMap.TruckDriving(truckOptions)
    path = [
      {lnglat: start},
      {lnglat: end}
    ]
    console.log(path)
    if (path) {
      driving.search(path, function (status, result) { // result即是对应的货车导航信息
        if (status === 'complete') {
          console.log('success')// log.success('绘制货车路线完成')
        } else {
          console.log('error' + result) // log.error('获取货车规划数据失败:' + result)
        }
      })
    }
  })
}

精确定位函数

getLocation () {
  const self = this
  AMap.plugin('AMap.Geolocation', function () {
    var geolocation = new AMap.Geolocation({
      // 是否使用高精度定位,默认:true
      enableHighAccuracy: true,
      // 设置定位超时时间,默认:无穷大
      timeout: 10000
    })

    geolocation.getCurrentPosition()
    AMap.event.addListener(geolocation, 'complete', onComplete)
    AMap.event.addListener(geolocation, 'error', onError)

    function onComplete (result) { // data是具体的定位信息
      console.log('定位成功信息:', result)
      start = result.position
      // path.push({lnglat: [data.position.lng, data.position.lat]})
      if (data.formattedAddress) {
        document.getElementById('id').innerText = data.formattedAddress
      }
      self.mapView()
    }
    function onError (data) {
      // 定位出错
      // document.getElementById('id').innerText = '定位失败,请稍后重试'
      console.log('精确定位失败错误:', data)
      // 调用ip定位
      self.getLngLatLocation()
    }
  })
}

优先使用精确定位,当精确定位失败时,调用IP定位

IP定位函数

getLngLatLocation () {
  AMap.plugin('AMap.CitySearch', function () {
    var citySearch = new AMap.CitySearch()
    citySearch.getLocalCity(function (status, result) {
      if (status === 'complete' && result.info === 'OK') {
        // 查询成功,result即为当前所在城市信息
        console.log('通过ip获取当前城市:', result)
        start = result.bounds.kc
        console.log('kc', result.bounds.kc)
        // 逆向地理编码
        var lnglat = result.rectangle.split(';')[0].split(',')
        AMap.plugin('AMap.Geocoder', function () {
          var geocoder = new AMap.Geocoder({
            city: result.adcode // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
          })
          geocoder.getAddress(lnglat, function (status, data) {
            if (status === 'complete' && data.info === 'OK') { // result为对应的地理位置详细信息
              document.getElementById('id').innerText = data.regeocode.formattedAddress
            }
          })
        })
      }
    })
    self.mapView()
  })
}

逆向地理编码函数,将具体中文地址转换为经纬度
逆向地理编码函数

getGeocode (city, detail) {
  return AMap.plugin('AMap.Geocoder', function () {
    var geocoder = new AMap.Geocoder({
      // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
      city: city
    })
    geocoder.getLocation(detail, function (status, result) {
      if (status === 'complete' && result.info === 'OK') {
        // result中对应详细地理坐标信息
        end = result.geocodes[0].location
      }
    })
  })
}

四、其他说明
精确定位的经纬度数据在返回的result中的position中
start=result.position
在这里插入图片描述
IP定位返回的经纬度数据在返回的result中的bounds.kc中
start=result.bounds.kc
在这里插入图片描述
在网页测试时精确定位并不精确,可以在手机上测试,系统会请求调用GPS定位
手机测试的方法可以看:webstorm开发的Vue项目在手机调试以及打包成apk
https://blog.csdn.net/qq_41836598/article/details/96152485

规划的结果,有图片和文字说明
高德各种demo的地址为https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show
在这里插入图片描述
我做的时候把文字说明的div删除了
在这里插入图片描述
感谢参考
https://lbs.amap.com/api/javascript-api/example/driving-route/plan-route-according-to-lnglat
https://lbs.amap.com/api/javascript-api/example/location/get-city-name-by-ip-location
https://blog.csdn.net/qq_42817227/article/details/98303058

  • 1
    点赞
  • 1
    评论
  • 10
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

通过实训要求学生利用网页开发工具、ASP.NET动态网页设计,结合企业网站的一些要求,学生能建立一个动态的企业或商业网站,使学生从网站规划、功能设计、数据库设计、界面设计、广告设计等方面得以提高。 培养学生从网站需要实现的功能角度考虑问题。考虑诸如网站定位、功能、主题、结构、风格、网络广告形式、创意以及开发工具、数据库和程序设计等技术的应用等综合能力。 1.完成商务网站——设计一个小型企业网站(企业介绍、售后服务支持、问题提交和解答等)或网上商店(书店、花店、百货店、网上产品销售等)。 2.完成企业网络营销方案的规划方案文档。 3.完成网站需求分析与规划书。 4.完成网站设计说明书。 5.网站中要求有自己做的flash动画;包含弹出式在内的两种以上形式的网络广告(弹出广告要求:主题自定;尺寸360*360 pix;色彩协调统一;设计意念新颖)。 6.网站前台页面至少五页,可有最新信息、用户注册功能,同时可以对网站新产品、畅销产品、优惠产品等所有产品及详细资料的浏览功能和商品查询功能(应具有强大的搜索功能,可以按各个字段进行不同方式的高级搜索。),商品选择、商品定单提交和确认。 7.后台管理功能(对商品管理):只对管理员开放,管理员可以对商品进行增加、删除、修改,同时支持批量处理。也可以对订单进行审核处理、还可以对图书分类的类别进行管理,商品分类,可分为“商品名、产地、规格”等等,还可以上传商品的外观图片,用户可自行决定所要上传的图片大小,建议图片大小不要超过3-5K。 8.后台管理功能(对客户管理):会员分VIP会员和一般会员,并提供不同的优惠,对各种不同客户的管理。 系统测试用户: 管理员:admin 123456 会 员:xiaoshan 123456
©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值