百度地图API自定义点路书,路书点击事件,路书速度动态改变
来源:互联网 发布:药店服务论文数据分析 编辑:程序博客网 时间:2024/06/18 13:38
前一段时间研究百度地图路书,查了很多资料也看源码,总结了一下如下
代码中有三个图片我放在下面,自行下载重命名和代码里面的名字保持一致,并且同代码放在同一个文件家里面,代码中注释也很详细,可自行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&ak=bB8H5rgknsMqiKIDV0ALeuocIbXd6Uro&services=&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点击事件及动态改变速度
阅读全文
1 0
- 百度地图API自定义点路书,路书点击事件,路书速度动态改变
- 百度地图API 移动的marker,移动marker点击事件及动态改变速度
- 百度地图API自定义覆盖物与添加点击事件
- iOS 自定义百度地图大头针点击事件
- 百度地图api点击BMKAnnotationView,不响应didSelectAnnotationView事件。
- android使用百度地图API的点击事件
- iOS 百度地图api点击BMKAnnotationView,不响应didSelectAnnotationView事件。
- 百度自定义API地图
- 关于百度地图InfoWindow响应自定义布局点击事件
- 百度地图API自定义地图
- 百度地图API如何给自定义覆盖物添加事件
- 【百度地图API】如何给自定义覆盖物添加事件
- 【百度地图API】如何给自定义覆盖物添加事件
- 百度地图-点击事件问题
- 百度地图PopupOverlay点击事件
- 百度地图-点击事件问题
- 百度地图API 点击地图提示信息
- 百度地图api--点击地图获取地址
- 深入理解SQL的四种连接-左外连接、右外连接、内连接、全连接
- GreenDao单利封装
- 命令行搭建vue-cli脚手架
- 有关Mybatis创建线程会话的工具类
- oracle分组排序几种情况总结
- 百度地图API自定义点路书,路书点击事件,路书速度动态改变
- Windows单机配置Zookeeper环境
- JAVA常见基础题(持续整理)
- 基于STM32F103关于FreeRTOS 学习笔记
- 英文字符串强制换行
- 如何制作类似fontawesome的图标库
- ionic--遇到URL中包含中文解决办法
- 这个“演员”获诺贝尔经济学奖,没想到他的理论我都能看懂...
- 让shell脚本中的echo输出带颜色