vue高德地图js路线规划清除规划路线的方式

最新推荐文章于 2022-11-15 17:44:57 发布
最新推荐文章于 2022-11-15 17:44:57 发布
阅读量3k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/icecreamgaga/article/details/103478745
版权

先说点废话，官方给的driving.clear()确实能清除规划路线，原因是人家把整个地图给你清了！白茫茫的一片，很有爱的样子！与其用这种方法，还不如我重新加载地图呗！
解决方法就是整个地图组件增加一个reloadFlag，组件中设置按钮，点击按钮的时候触发主组件的reload方法，roload方法先把reloadFlag设置为false,
然后用nextTick再设置成true!

icecreamgaga
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2/3 - 最新详细使用高德地图进行路线规划和详细途径路段信息，vue高德地图实现起点和终点路径高亮显示在地图上，并计算出整个路途公里数、预计到达时间、驾驶导航详细步骤信息（详细示例代码直接复制
高级前端工程师
05-11 3150
vue2，vue3，高德地图，vue高德地图，起点到终点，地图轨迹，路径规划，驾车轨迹图，利用高德地图实现车辆的路线规划，高德地图轨迹绘制，路段详细导航信息，vue实现高德地图路线规划功能，规划路线后如何获取途径的路段信息，途径数据，导航，导航详细数据，vue导航规划，导航路线规划绘制，导航规划后怎么获得途径的各路段，vue3使用高德地图，vue高德地图实现路线规划（含途经点），途径点详细数据，高德地图途径点怎么获取，行车路径规划 起始点+途经点，导航途径点数据用什么api，路线规划设置途经点，详细教程，高
高德地图API路径规划结果清除
weixin_43182282的博客
10-01 9999
关于高德地图API之路径规划结果的清除（js API） 偶然用到高德地图API做路径规划，在做的过程中发现连续进行不同的路径规划产生的结果是叠加的。如何清除上一次的路径规划呢？开发手册上有一个**clear()**函数，就是用来清除搜索结果的。废话不多说，直接上代码： //driving 为全局变量，也只有设为全局变量才能存储每次的路径规划结果，才能调用clear()函数 if(drivi...
高德地图移除路线Demo
04-17
高德地图添加路线，移除路线以及更改路线颜色、宽度等操作 高德地图其他操作都很简单就
高德地图做汽车路线规划的时候清除之前的路线
wangweiscsdn的博客
06-20 3674
在做这个汽车路线规划的时候遇到的问题：就是汽车位置到起点的路线，然后变成汽车位置从起点至终点，那么汽车位置到起点的路线没有清除，还留在上面，要强制刷新页面才能清除！这样当然是不行的！！！ 解决办法就是调用这个方法 // 清除所有覆盖物，只要用这个就可以了， this.map.clearMap() 调用这个方法后就可以看到效果了，我用的react，是在componentWillRece...
高德(百度)地图驾车路线规划和清除
花铛
08-23 5128
百度地图： 路线规划： var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true //自动调整地图层级 } }); var start = new BMap.Point(116.310791, 40.003419); var e...
高德地图js api:轨迹在vue项目中的隐藏、显示、清空.hide().show().setData([])
weixin_43823766的博客
07-17 4754
记录一下在使用vue重构项目时，高德地图轨迹使用的问题。 在做项目中，碰到提供给用户radio-box，让用户选择看哪条轨迹，高德地图js api手册只是陈列了方法.hide()以及.show()，但没有仔细介绍如何使用方法，实例中也没有使用。 （调用Amap这里就不讲了） 我在网上搜了很多博客都没有找到如何使用这两种方法，但是手册里写着就觉得肯定可以实现所以不断尝试，最后总结一下写两个简单的例子...
vue2用高德地图实现绘制多边形电子围栏
09-05
vue2用高德地图实现绘制多边形电子围栏
高德地图Loca和路线规划vue演示项目.zip
最新发布
10-21
该项目是一个基于Vue.js框架的高德地图应用实例，主要展示了如何集成高德地图Loca服务以及路线规划功能。Vue.js是目前非常流行的前端JavaScript框架，它以组件化开发、轻量级、易学习等特性受到开发者喜爱。而高德...
vue+高德地图写地图选址组件的方法
11-29
现在做这个移动端的项目中有一个地图选址的功能，本来高德地图中有一个现成的选址组件，但是有两个问题，因为他是用iframe引用的，第一改不了样式，这点还勉强能接受；第二他的左上角有一个返回键，在搜索的时候可以...
vue中使用高德地图（JSAPI2.0示例）
04-28
参考高德地图官网的示例实现的。
高德地图 添加路线 删除路线 demo
04-18
高德地图添加路线，移除路线以及更改路线颜色、宽度等操作 高德地图其他操作都很简单就没有涉及
在vue中高德地图引入和轨迹的绘制的实现
01-21
vue中使用cdn引入高德地图，并在main.js中进行全局配置。（百度上有高德地图引入与配置方法，这里就不详细介绍）； 1） npm install vue-amap --save 2） import VueAMap from ‘vue-amap' Vue.use(VueAMap); ...
只删除高德地图覆盖物的折线或点的方法
weixin_42908931的博客
10-12 3028
删除指定的多个高德地图覆盖物 在使用高德地图要进行点的移动时发现需要先删除之前画好的折线。 网上找的方法都是直接清空全部覆盖物，只有这两种方法可以删除折线，同理也可以删除点（Marker）之类的 map.remove(this.polylines); //map是地图实例，this.polyines是你定义的折线或点 this.polyline.setMap(null) //我定义的折线 if(this.marker.length > 1){//当有两个点以上才开始生成折线 this.p
高德地图：加载坐标，标记更新切换
weixin_43127990的博客
11-15 793
【代码】高德地图：加载坐标，标记更新切换。
关于调用高德地图路径规划清除问题解决方案【js】
qq_38472451的博客
06-24 495
关于调用高德地图路径规划清除问题解决方案【js】
高德地图之路线规划
热门推荐
Vicent_9920的博客
05-07 1万+
在上一篇文章中，我们讲到了高德地图之拾取地点，今天接下来总结路线规划，整个实现的过程大致如下： 获取终点 规划路线 路线的选择与路线的绘制 路线结果的展示 首先来看看需要实现的效果：整个布局比较简单，唯一需要注意的就是
vue高德地图路线规划
10-10
可以使用高德地图JavaScript API来实现Vue高德地图路线规划。具体的步骤包括：引入高德地图JavaScript API，创建地图实例，添加插件，创建起点和终点，调用路线规划API，解析返回结果并展示在地图上。以下是一个简单的例子： ``` <template> <div id="map"></div> </template> <script> import { MapLoader, Map } from 'vue-amap'; export default { components: { MapLoader, }, data() { return { mapInstance: null, startPoint: [116.397428, 39.90923], endPoint: [116.418261, 39.921984], }; }, mounted() { MapLoader.load({ key: 'your amap key', version: '1.4.15', plugins: ['AMap.Driving'], }).then((AMap) => { this.mapInstance = new AMap.Map('map', { zoom: 10, center: this.startPoint, }); const startMarker = new AMap.Marker({ position: this.startPoint, map: this.mapInstance, }); const endMarker = new AMap.Marker({ position: this.endPoint, map: this.mapInstance, }); const driving = new AMap.Driving({ map: this.mapInstance, policy: AMap.DrivingPolicy.LEAST_TIME, }); driving.search(this.startPoint, this.endPoint, (status, result) => { if (status === 'complete') { const path = []; const steps = result.routes[0].steps; steps.forEach((step) => { const { path: stepPath } = step; path.push(...stepPath); }); const polyline = new AMap.Polyline({ path, strokeColor: '#3366FF', strokeWeight: 5, }); polyline.setMap(this.mapInstance); } }); }); }, }; </script> <style scoped> #map { height: 400px; } </style> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值