如何利用百度地图JSAPI画带箭头的线？

最新推荐文章于 2023-09-14 18:26:21 发布
VIP文章 最新推荐文章于 2023-09-14 18:26:21 发布
阅读量1.8w 收藏 10
点赞数 3
分类专栏： JavaScript API
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidulbs/article/details/8571961
版权

    百度地图JSAPI提供两种绘制多折线的方式，一种是已知多折线经纬度坐标串通过AddOverlay接口进行添加；另一种是通过在地图上鼠标单击进行绘制（鼠标绘制工具条库）。目前这两种方式只能绘制多折线，并不能同时绘制线的箭头，以下介绍如何在线的拐点同时绘制箭头，以供参考。最终效果如下：

   

    1. 绘制箭头方法：

    

    上图中，线段AB是通过JSAPI画线方式添加的，只要绘制出CBD就可以实现箭头效果。为了灵活绘制箭头，需

最低0.47元/天 解锁文章
BaiduLBS
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
详解vue.js下引入百度地图jsApi的两种方法
10-18
主要介绍了详解vue.js下引入百度地图jsApi的两种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
百度地图JSAPI GL版的JavaScript开源工具库
09-07
# BMapGLLib 本代码库是基于百度地图JSAPI GL版的JavaScript开源工具库，如果使用的是2D地图的话，参考旧的[2D开源库](https://github.com/huiyan-fe/BMap-JavaScript-library)。 ## 如何使用 我们在将GL版的开源工具库放到了百度云的BOS存储上，根据github文件目录可以推理出BOS的路径，比如： `<link href="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">` `<script src="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>`
vue 百度地图(vue-baidu-map)绘制方向箭头折线
qq_45379479的博客
04-27 4943
官方文档地址： 百度地图 JavaScript API v3.0 vue-baidu-map 原生JS在折线上添加方向箭头官方案例 在开发过程中发现vue-baidu-map封装的BmPolyline折线组件不能顺利绘制出带箭头的纹理。 原因是BmPolyline文档中虽然有icons属性，但是对应的源文件中并没有props接收icons 最初的开发思路： 根据vue-baid...
百度地图jsAPI开发停车场分布标注和检索静态版
06-13
百度地图开发停车场分布标注和检索静态版： 1.基于百度地图jsAPI接口开发； 2.实现标注和弹窗功能； 3.实现标注的检索功能（名称和地址）； 4.静态HTML页面； 5.卫星地图和行政地图的切换； 详情见：https://lockdatav.blog.csdn.net/article/details/125265515
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
10-27
本文将详细介绍下如何使用百度地图JSAPI生成的H7N9感染分布图，有对百度api感兴趣的朋友可以参考下哈，希望可以帮助到你
百度地图JavaScript API GL1.0给折线添加箭头
给我一根筷子，我能撬动整个地球
01-19 1960
至于，纹理图片可以使用 Photoshop 自己画一个，需要注意的是箭头方向，例如：轨迹由 A 运动至 B，箭头向下，则实际效果由 A 指向 B；反之，则由 B 指向 A。Photoshop 工程图层可以使用上面的配置，GL 版本的箭头显示相较于 2.0、3.0 来说要更加丝滑，使用也更加方便。中有介绍到给折线添加图片纹理，使用了一个 JavaScript 类参考中没有写出来的属性。但是，在 GL 版本中移除了 IconSequence，那是不是就没办法实现呢？
vue利用百度地图api画路线&打点&滑入展示（坐标）
weixin_44197797的博客
06-30 6192
1.创建地图容器 <div id="allmap" style=" border-radius: 5px;" ></div> 2.展示百度地图 guiji() { var map = new BMap.Map('allmap') var point = new BMap.Point(132.1321213213,382651646846) //随便写的坐标 } 3.画出路线（注意看注释） guiji() { var map = new BMa
百度地图绘制行驶轨迹、折线上添加箭头、修改地图底色
莫不静好
08-12 4538
页面效果 页面代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user...
在百度地图绘制箭头线
春来江水绿如蓝
10-18 4614
HTML test baidu map #container { height:800px; width:900px;} var my_map= new BMap.Map("container"); var point = new BMap.Point(105.0, 35.0); my_map.centerAndZoom(point, 5);
百度地图定位开发图标大全(包括定位箭头、定位圆圈)
06-28
拥有百度地图开发所需要的大多数图标！适合刚入门者，包括定位图标，定位箭头图标等等一系列
openlayers如何使用（二）点线的创建
可乐加冰的博客
08-15 1205
首先需要在地图中创建一个具有几何和其他属性属性的地理特征的矢量对象（feature），然后在其中就可以new一个点元素了（point），点元素可以对他去设置相应的style让显示的样式发生改变，或者new一个icon用图片去展示点的效果，在创建好点后需要将点加载到对应的源中（source）③ 线的创建于点是相同的，上图中线的样式其实是两条线叠加在一起形成的，给每条线设置不同的样式与层级，来展示，还可以通过改变线的偏移量，来得到一条具有动态效果的线。这样我们就完成了地图中点与线的创建。...
基于百度地图实现带箭头的轨迹
王也的博客
03-31 754
基于百度地图实现带箭头的轨迹。
百度地图 使用两条平行线表示路线
weixin_30448603的博客
07-14 375
根据他人的程序修改的，原文是如何利用百度地图JSAPI画带箭头的线？ 在此，使用两条平行线表示路线。 1.坐标计算： 2.代码如下： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPat...
百度地图画运动轨迹，带箭头方向、纹理
热门推荐
lienyin的博客
05-08 3万+
//1.创建一个经纬度数组List&lt;LatLng&gt; latLngPolygon = new ArrayList&lt;LatLng&gt;();//2.这是一组经纬度集合（数据自己找）LatLng pt1 = new LatLng(list.get(i).lat, list.get(i).lng);latLngPolygon.add(pt1);//经纬度添加到数组里面//3.到你要用的...
在地图上绘制实时轨迹线和方向箭头
aluoshiyi的博客
02-27 1万+
最终实现效果如下图：
百度地图GL javascript API 如何绘制流动箭头的线？
湖北太米网络科技有限公司
09-14 570
要使用百度地图GL JavaScript API绘制流动箭头线，可以使用 Polyline 和 Symbol 样式来实现。下面是一个示例代码：// 创建地图实例 var map = new BMapGL.Map("mapContainer"); map.centerAndZoom(new BMapGL.Point(116....
vue百度地图结合echarts飞线图进行打点及标注
qq_35478008的博客
03-31 1495
打点的图标，可以使用默认的图标，也可以使用自定义的图标，在symbol项里，常用的默认有'circle','pin'，如果用下载的图片symbol: 'image://'+require('@/assets/map/img1.png'),图标大小使用symbolSize来设置。飞线图和起始点的数据不是同一组数据，需要分别处理一下，所以在echarts的series中分别处理和配置。formatter: '{b}', //展示的数据及格式在这里设置。position: 'right', // 展示的位置。
【快速上手】Vue如何通过百度地图插件——vue-baidu-map插件实现地图轨迹与路线等功能
weixin_43746402的博客
06-28 1万+
现在挺多博主都做的挺完整的地图文档使用介绍等等，但有时候我们接触去选择自己做的效果时候还是会遇到很多不同的问题。这里我把我自己个人在各个检索下的文章，做出自己想要的效果地图，基础地图功能＋路线+运动轨迹的过程介绍一下对应组件使用与注意事项。
vue 百度地图 jsapi 轨迹 回放
最新发布
12-16
Vue.js是一个用于构建用户界面的开源JavaScript框架，可以简化开发过程并提高开发效率。百度地图JS API是百度地图提供的一套JavaScript API，可以在网页中集成地图功能。轨迹回放是指根据已经记录的轨迹数据，将轨迹在地图上以动画的形式重新播放出来。 在Vue中使用百度地图JS API进行轨迹回放，首先需要在Vue项目中引入百度地图的JS文件，并在Vue实例的mounted钩子函数中初始化地图。 在获取到轨迹数据后，可以使用百度地图提供的Polyline类创建一个折线对象，并将轨迹点添加到折线对象中。然后使用地图的addOverlay方法将折线对象添加到地图上，实现轨迹的显示。 为了实现轨迹的回放效果，可以使用Vue的定时器函数setInterval来定时改变折线对象的显示范围，从而实现轨迹的动画效果。可以通过设置折线对象的路径切片来控制每次显示的轨迹点数量，并随着时间的推移逐渐增加显示的点数，从而实现回放效果。 同时，为了提高回放的流畅度和体验，可以使用百度地图提供的动画效果类Effect来给轨迹点添加动画效果，比如平滑移动、旋转等，使得轨迹回放更加真实。 总而言之，利用Vue和百度地图JS API，可以很方便地实现轨迹回放功能。通过初始化地图、创建折线对象、定时改变折线对象的显示范围，再加上动画效果的设置，就能够实现一个带有回放功能的轨迹展示页面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值