地图容器:

// css要给此容器设置宽高
<div class="map_container"></div>

画图

data{  return {   Clng:"120.267842",   Clat:"30.19439",  Flng:"120.267417907715",  Flat:"30.19460105896",  Tlng:"120.269302368164",   Tlat:"30.2087898254395"  }},mounted(){  this.drawMap();},methods:{

    drawMap() { // 专车--画地图let that = this;var map = new AMap.Map('map_container', {resizeEnable: true,zoom:14,center: [that.Clng, that.Clat] // 地图中心点的经纬度});AMap.plugin('AMap.Driving', function() {var driving = new AMap.Driving({// 驾车路线规划策略,AMap.DrivingPolicy.LEAST_TIME是最快捷模式,还有其他几种方式见Api文档
            policy: AMap.DrivingPolicy.LEAST_TIME  })//起、终点var start_xy = new AMap.LngLat(that.Flng, that.Flat) // 起点的经纬度var end_xy = new AMap.LngLat(that.Tlng, that.Tlat)   // 终点的经纬度// 根据起终点经纬度规划驾车导航路线driving.search(start_xy, end_xy, function(status, result) {if (status === 'complete') {if (result.routes && result.routes.length) {console.log(result.routes[0]);// 绘制第一条路线,也可以按需求绘制其它几条路线var path = that.parseRouteToPath(result.routes[0])var startMarker = new AMap.Marker({position: path[0],icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',map: map})var endMarker = new AMap.Marker({position: path[path.length - 1],icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',map: map})var routeLine = new AMap.Polyline({path: path,isOutline: true,outlineColor: '#ffeeee',borderWeight: 2,strokeWeight: 5,strokeColor: '#0091ff',lineJoin: 'round'})routeLine.setMap(map)// 调整视野达到最佳显示区域
                        map.setFitView([ startMarker, endMarker, routeLine ])console.log('绘制驾车路线完成')}} else {console.log('获取驾车数据失败:' + result)}});})  },parseRouteToPath(route) {var path = []for (var i = 0, l = route.steps.length; i < l; i++) {var step = route.steps[i]for (var j = 0, n = step.path.length; j < n; j++) {path.push(step.path[j])}}return path}}

转载于:https://www.cnblogs.com/leiting/p/9874905.html

js/vue 高德地图绘制驾车路线图相关推荐

  1. vue+高德地图绘制路径

    一.vue+高德地图开发 最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...

  2. vue高德地图绘制行政区边界

    <template><div id="gaodeMap"></div> </template><script>impor ...

  3. 百度地图 - 绘制驾车路线图

    简介 在地图的开发中,最常出现的需求就是驾车线路规划.没开发过的人都会认为比较复杂,当把文档看了一遍之后你就会发现百度api比我们想象中还要强大.下面就开始介绍如何通过百度api轻松的实现这个功能. ...

  4. vue +高德地图 绘制围栏

    简易版绘制围栏 <template><div class="amapContainer_con"><button type="primary ...

  5. vue 给圆遮盖物添加文字 高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...

    通过 Vue + 高德地图 JS API 在地图上标记咖啡店 由 学院君 创建于2年前, 最后更新于 2年前 版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...

  6. Vue 高德地图 js API Loca 如何使用 连接线图层、脉冲连线图层

    Vue 高德地图 js API Loca 如何使用 连接线图层.脉冲连线图层 阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式 已经了解如何载入 Loca 插件 如果不了解,可以查看我之 ...

  7. vue高德地图JS API 实现海量点标记展示

    官方文档:海量点标记-覆盖物-教程-地图 JS API | 高德地图API 需求:根据后台接口返回的部分数据,这里仅做展示 ,可参考使用. 可以加入弹窗点击的时候. 实现效果: JSAPI 的加载 J ...

  8. 利用vue+高德地图API 实现用户的运动轨迹

    利用vue+高德地图API 实现用户的运动轨迹 高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示 先完成准备工 ...

  9. 高德地图-绘制去程和回程路线

    1.问题背景 设置去程和回程的路线图,并用不同的颜色设置路线 2.实现源码 <!doctype html> <html> <head><meta charse ...

最新文章

  1. 夺命雷公狗---node.js---20之项目的构建在node+express+mongo的博客项目5mongodb在项目中实现添加数据...
  2. python编程入门第一课_python入门前的第一课 python怎样入门
  3. java 免费cms_开源 免费 java CMS
  4. spring定时器突然不执行了_非标自动化设备之PLC定时器的时间和程序扫描周期
  5. 作者:冷芳玲(1978-),女,博士,东北大学计算机科学系讲师
  6. 燃鹅小助手自动抽奖源码
  7. computed用发_Vue中的computed属性和nextTick方法
  8. 用于CRUD和更多的模型驱动的RESTful API
  9. 搭建MySQL高可用架构MHA
  10. 论文阅读|How Does Batch Normalizetion Help Optimization
  11. HTML页面中返回顶部的几种实现方式
  12. 机器学习_数学基础专题
  13. mysql间隙锁_解决MySQL可重复读——详解间隙锁
  14. Photoshop CS6下载包下载 及破解安装教程
  15. android TextView首行缩进两个字符
  16. Excel表格进行10进制/16进制换算
  17. 六一儿童节海报合集,一起重拾童年吧~
  18. Python爬取网易云音乐热歌榜(爬虫)
  19. 实例:用C#.NET手把手教你做微信公众号开发(19)--使用微信支付转账到微信粉丝零钱账户
  20. 自身的优势--抱怨,读《象与骑象人》有感

热门文章

  1. C/C++字节对齐总结
  2. 1 客户端性能--浏览器页面处理
  3. js ajax上传图片到服务器
  4. [itint5]棋盘漫步
  5. 介绍Azure服务平台,.NET Services及其中的访问控制服务(Access Control)
  6. const成员函数、const类对象、mutable数据成员
  7. 制作ubuntu 18.04 U盘启动盘
  8. Linux系统下对flash的测试方法
  9. 茅台防伪溯源服务器临时维护,如何使用茅台防伪溯源系统?能辨别茅台酒真假?...
  10. oracle不开归档对效率会快吗,关于性能:存档庞大的数据库(oracle),而不会影响向其插入记录的进程...