百度地图API自定义点路书，路书点击事件，路书速度动态改变

前一段时间研究百度地图路书，查了很多资料也看源码，总结了一下如下
代码中有三个图片我放在下面，自行下载重命名和代码里面的名字保持一致，并且同代码放在同一个目录里面，代码中注释也很详细，可自行copy
hightTrain.png
station.png
xian.jpg

<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>百度地图 API 制作路书</title><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.3, user-scalable=no"><meta name="description" content="百度地图 API 制作路书"><meta name="keywords" content="百度 API"><meta name="author" content="wg"><style>html,body,#map{height: 100%;width: 100%;margin: 0;}</style><script src="http://api.map.baidu.com/api?v=1.4"></script><script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=bB8H5rgknsMqiKIDV0ALeuocIbXd6Uro&amp;services=&amp;t=20171004185957"></script><script src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script><body><div id="map"></div>        <script>var bmap = document.getElementById('map');var map = new BMap.Map("map");            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放var point = new BMap.Point(108.740663, 34.349856);var points = [  new BMap.Point(108.988452, 34.392405),new BMap.Point(108.945046, 34.381442), new BMap.Point(108.915438, 34.372742), new BMap.Point(108.844579, 34.355817),new BMap.Point(108.767253, 34.34628), new BMap.Point(108.740663, 34.349856), new BMap.Point(108.67268, 34.336861), new BMap.Point(108.571351, 34.305735), new BMap.Point(108.4946, 34.296431), new BMap.Point(108.418136, 34.279728)];var markers = [points[1],//西安北站points[5],//咸阳站points[6],//咸阳秦都站points[8]//兴平站];//用站点画出路线，参数：站点、线路颜色、线路宽度、透明度var polyline = new BMap.Polyline(points, {strokeColor:"#5298ff", strokeWeight:6, strokeOpacity:0.8}); map.addOverlay(polyline);//添加轨迹到地图var lushu = new BMapLib.LuShu(map, points, {//landmarkPois:此参数是路书移动的时候碰到这个点会触发pauseTime停留中设置的时间，单位为秒，经纬度误差超过十米不会停止landmarkPois:[{lng:markers[0].lng,lat:markers[0].lat,html:'<img src="xian.jpg" /></br>西安北站到了',pauseTime:1},{lng:markers[1].lng,lat:markers[1].lat,html:'咸阳站到了',pauseTime:1},{lng:markers[2].lng,lat:markers[2].lat,html:'咸阳秦都站到了',pauseTime:1},{lng:markers[3].lng,lat:markers[3].lat,html:'兴平站到了',pauseTime:1}],defaultContent: '动车继续前行，况且况且...',speed: 1000,//速度，单位米每秒/* 1、需要把图片和代码放在同一个文件夹下面* 2、size()是设置图片大小，图片过大可以截取* 3、anchor是设置偏移，默认是图片最中间，设置偏移目的是让图片底部中间与坐标重合*/icon: new BMap.Icon('hightTrain.png', new BMap.Size(48, 48), {anchor: new BMap.Size(24, 34)}),//声明高铁标注autoView: false,enableRotation: false});var icon1 = new BMap.Icon('station.png', new BMap.Size(32,32),{anchor: new BMap.Size(16, 32)});//声明站点标注for (i=0;i<markers.length;i++){map.addOverlay(new BMap.Marker(markers[i],{icon:icon1}));//添加站点marker}map.centerAndZoom(point, 12   );//设置中心点和级别（级别是1-20）数字越大越是放大lushu.start();//添加路书点击事件，并改变其运动速度map.addEventListener('click',startlushu);function startlushu(e){if (!!e.overlay) {var markerId = lushu._marker.ba;if (e.overlay.ba == markerId) {alert('你点击了高铁，速度即将变快');lushu._opts.speed = lushu._opts.speed+2000;}} }</script></body>
</html>

研究了这么长时间发现路书有以下缺点：
a、如果一个地图上面添加多个路书会互相影像其他的的运动速度
b、路书运动速度太快点击事件基本上不容易触发
c、添加多个路书百度地图会变得卡顿
所以之后项目上用的路书全改为标注，动态改变标注的位置就类似于路书而且运动速度和轨迹可以随意控制，高速运动的标注也可以触发点击事件，添加多个互不影响其它标注和地图性能，可参考百度地图API 移动的marker，移动marker点击事件及动态改变速度

百度地图API自定义点路书，路书点击事件，路书速度动态改变相关推荐

如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...
在网页中插入百度地图如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击 ...
百度地图API : 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <!DOCTYPE html> ...
百度地图API 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...
根据百度地图API自定义切换地图类型为卫星或普通
业务场景根据实际业务场景的需要,不能直接使用百度地图的控件,所以打算用百度地图API中map类的setMapType()方法实现.在Vue3中使用百度地图API切换地图类型为卫星或普通,创建一个自定 ...
百度地图api自定义修改地图背景样式
引入百度地图api就不用多说了吧! https://developer.baidu.com/map/custom/ //这个网址可以去模拟修改百度地图样式当修改到心仪的样式时,点击生成JSON,就会 ...
百度地图api 自定义覆盖范围及背景颜色
百度地图自带根据行政区划覆盖,只要使用api输入行政区划就可自动覆盖对应的行政区域,但是想要覆盖自定义的区域该方法就无法适应需求,百度地图JavaScript API中有一个创建多边形的方法,可使用此 ...
百度地图api 自定义驾车线路规划车辆实时定位
项目需求根据百度api给出的接口实现从始发地→目的地线路规划以及车辆的实时位置跟踪定位 1.首先引入百度API <script type="text/javascript& ...
html百度地图标记图标,百度地图api之换自定义标注图标
百度地图API自定义地图 html,body{margin:0;padding:0;} .iw_poi_title {color:#CC5522;font-size:14px;font-weight: ...

百度地图API自定义点路书，路书点击事件，路书速度动态改变

百度地图API自定义点路书，路书点击事件，路书速度动态改变相关推荐

最新文章

热门文章