js/vue 高德地图绘制驾车路线图
地图容器:
// 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 高德地图绘制驾车路线图相关推荐
- vue+高德地图绘制路径
一.vue+高德地图开发 最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
- vue高德地图绘制行政区边界
<template><div id="gaodeMap"></div> </template><script>impor ...
- 百度地图 - 绘制驾车路线图
简介 在地图的开发中,最常出现的需求就是驾车线路规划.没开发过的人都会认为比较复杂,当把文档看了一遍之后你就会发现百度api比我们想象中还要强大.下面就开始介绍如何通过百度api轻松的实现这个功能. ...
- vue +高德地图 绘制围栏
简易版绘制围栏 <template><div class="amapContainer_con"><button type="primary ...
- vue 给圆遮盖物添加文字 高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店 由 学院君 创建于2年前, 最后更新于 2年前 版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
- Vue 高德地图 js API Loca 如何使用 连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用 连接线图层.脉冲连线图层 阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式 已经了解如何载入 Loca 插件 如果不了解,可以查看我之 ...
- vue高德地图JS API 实现海量点标记展示
官方文档:海量点标记-覆盖物-教程-地图 JS API | 高德地图API 需求:根据后台接口返回的部分数据,这里仅做展示 ,可参考使用. 可以加入弹窗点击的时候. 实现效果: JSAPI 的加载 J ...
- 利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹 高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示 先完成准备工 ...
- 高德地图-绘制去程和回程路线
1.问题背景 设置去程和回程的路线图,并用不同的颜色设置路线 2.实现源码 <!doctype html> <html> <head><meta charse ...
最新文章
- 夺命雷公狗---node.js---20之项目的构建在node+express+mongo的博客项目5mongodb在项目中实现添加数据...
- python编程入门第一课_python入门前的第一课 python怎样入门
- java 免费cms_开源 免费 java CMS
- spring定时器突然不执行了_非标自动化设备之PLC定时器的时间和程序扫描周期
- 作者:冷芳玲(1978-),女,博士,东北大学计算机科学系讲师
- 燃鹅小助手自动抽奖源码
- computed用发_Vue中的computed属性和nextTick方法
- 用于CRUD和更多的模型驱动的RESTful API
- 搭建MySQL高可用架构MHA
- 论文阅读|How Does Batch Normalizetion Help Optimization
- HTML页面中返回顶部的几种实现方式
- 机器学习_数学基础专题
- mysql间隙锁_解决MySQL可重复读——详解间隙锁
- Photoshop CS6下载包下载 及破解安装教程
- android TextView首行缩进两个字符
- Excel表格进行10进制/16进制换算
- 六一儿童节海报合集,一起重拾童年吧~
- Python爬取网易云音乐热歌榜(爬虫)
- 实例:用C#.NET手把手教你做微信公众号开发(19)--使用微信支付转账到微信粉丝零钱账户
- 自身的优势--抱怨,读《象与骑象人》有感
热门文章
- C/C++字节对齐总结
- 1 客户端性能--浏览器页面处理
- js ajax上传图片到服务器
- [itint5]棋盘漫步
- 介绍Azure服务平台,.NET Services及其中的访问控制服务(Access Control)
- const成员函数、const类对象、mutable数据成员
- 制作ubuntu 18.04 U盘启动盘
- Linux系统下对flash的测试方法
- 茅台防伪溯源服务器临时维护,如何使用茅台防伪溯源系统?能辨别茅台酒真假?...
- oracle不开归档对效率会快吗,关于性能:存档庞大的数据库(oracle),而不会影响向其插入记录的进程...