百度地图API -自定义折线

最新推荐文章于 2023-09-11 16:02:39 发布

ヽ错落不堪的年华。

最新推荐文章于 2023-09-11 16:02:39 发布

阅读量943

点赞数 2

分类专栏：前端技术交流技术总结文章标签：百度地图 api 折线前端自定义

本文链接：https://blog.csdn.net/qq_44777678/article/details/102726318

版权

技术交流同时被 3 个专栏收录

107 篇文章 2 订阅

订阅专栏

技术总结

103 篇文章 0 订阅

订阅专栏

前端

97 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>多线测试</title>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
	<script src="./LuShu_min.js"></script>
	<script src="./jquery-1.11.0.min.js"></script>
	<style type="text/css">
		body,html {
			width: 100%;
			height: 100%;
			margin: 0;
			font-family: "微软雅黑";
		}
		#map_canvas {
			width: 100%;
			height: 100%;
		}
		
	</style>
</head>
<body>
	<div id="map_canvas"></div>

	<script>
		// 检查网络连接状态
		window.addEventListener('offline', function() {
			alert('网络已断开');
			// console.log(e)
		})
		window.addEventListener('online', function() {
			alert('网络已连接');
			// console.log(e)
		})

		// 生成地图
		var map = new BMap.Map('map_canvas');
				// 初始化地图,设置中心点坐标和地图级别
				map.centerAndZoom(new BMap.Point(113.789276, 34.49072), 14);  
				//开启鼠标滚轮缩放
    		map.enableScrollWheelZoom(true);   

				//	个性主题
		 		map.setMapStyle({
        	style: 'midnight'
        });

				map.addEventListener("tilesloaded",function(){
					console.log('地图加载完毕')
				});
				
		
		$(function(){
			var data = [
									[
										{x: 113.789276, y: 34.49072, carNumber:'豫000000', color:'#00FA9A'},
										{x: 113.789276, y: 34.49072, carNumber:'豫000000', color:'#00FA9A'},
										{x: 113.789467, y: 34.490937, carNumber:'豫000000', color:'#00FA9A'},
										{x: 113.789647, y: 34.491044, carNumber:'豫000000', color:'#00FA9A'},
										{x: 113.789848, y: 34.49111, carNumber:'豫000000', color:'#00FA9A'},
										{x: 113.791276, y: 34.490936, carNumber:'豫000000', color:'#00FA9A'},
										{x: 113.791628, y: 34.4909, carNumber:'豫000000', color:'#00FA9A'},
										{x: 113.793236, y: 34.490692, carNumber:'豫000000', color:'#00FA9A'},
										{x: 113.795921, y: 34.490315, carNumber:'豫000000', color:'#00FA9A'},
										{x: 113.796283, y: 34.490269, carNumber:'豫000000', color:'#00FA9A'}
									],
									[
										{x: 113.798696, y: 34.489936, carNumber:'豫000000', color:'#FF4500'},
										{x: 113.799551, y: 34.489811, carNumber:'豫000000', color:'#FF4500'},
										{x: 113.800506, y: 34.489675, carNumber:'豫000000', color:'#FF4500'},
										{x: 113.801923, y: 34.48953, carNumber:'豫000000', color:'#FF4500'},
										{x: 113.802909, y: 34.489374, carNumber:'豫000000', color:'#FF4500'},
										{x: 113.804275, y: 34.489161, carNumber:'豫000000', color:'#FF4500'},
										{x: 113.804356, y: 34.48915, carNumber:'豫000000', color:'#FF4500'},
										{x: 113.807511, y: 34.48872, carNumber:'豫000000', color:'#FF4500'},
										{x: 113.809882, y: 34.488407, carNumber:'豫000000', color:'#FF4500'}
									],
									[
										{x: 113.800189, y: 34.488853, carNumber:'豫000000', color:'#EE82EE'},
										{x: 113.79965, y: 34.486562, carNumber:'豫000000', color:'#EE82EE'},
										{x: 113.798644, y: 34.482217 , carNumber:'豫000000', color:'#EE82EE'},
										{x: 113.797781, y: 34.478557, carNumber:'豫000000', color:'#EE82EE'},
										{x: 113.804716, y: 34.478141, carNumber:'豫000000', color:'#EE82EE'},
										{x: 113.805219, y: 34.48189, carNumber:'豫000000', color:'#EE82EE'},
										{x: 113.805112, y: 34.484092, carNumber:'豫000000', color:'#EE82EE'},
										{x: 113.803998, y: 34.485937, carNumber:'豫000000', color:'#EE82EE'},
										{x: 113.809172, y: 34.485104, carNumber:'豫000000', color:'#EE82EE'},
										{x: 113.812011, y: 34.480254, carNumber:'豫000000', color:'#EE82EE'},
										{x: 113.812729, y: 34.484598, carNumber:'豫000000', color:'#EE82EE'}
									],
									[
										{x: 113.774228, y: 34.492701, carNumber:'豫000000', color:'#FFA500'},
										{x: 113.773968, y: 34.491079, carNumber:'豫000000', color:'#FFA500'},
										{x: 113.773905, y: 34.488959, carNumber:'豫000000', color:'#FFA500'},
										{x: 113.773896, y: 34.488573, carNumber:'豫000000', color:'#FFA500'},
										{x: 113.77766, y: 34.488312, carNumber:'豫000000', color:'#FFA500'},
										{x: 113.782403, y: 34.488007, carNumber:'豫000000', color:'#FFA500'},
										{x: 113.773824, y: 34.488595, carNumber:'豫000000', color:'#FFA500'},
										{x: 113.773663, y: 34.486378, carNumber:'豫000000', color:'#FFA500'},
										{x: 113.773519, y: 34.483968, carNumber:'豫000000', color:'#FFA500'},
										{x: 113.770159, y: 34.484266, carNumber:'豫000000', color:'#FFA500'},
										{x: 113.770698, y: 34.489324, carNumber:'豫000000', color:'#FFA500'}
									]
								]

			var points = [] //渲染数组值
			var jsonLast = null // 数组最后的值
			var polyline = ''
			var cc = 0;
			
			// 定时刷新数据信息
			var tests = setInterval(Multi_line, 5000)

			function Multi_line() {
				// 清楚覆盖物
				map.clearOverlays();

				// 重新加载数据
				points = []

				for(let i=0; i<data.length; i++) {
						// 二次循环清空数据
						points = []
	
					for(let j=0; j<data[i].length; j++){
						var p= new BMap.Point(data[i][j].x, data[i][j].y);
						points.push(p);
					}
					// 数组最后的值
					var jsonLast = data[i].length-1; 

					// 创建折线函数
					test(data, points, i, jsonLast)
				}


				console.log(cc)
				cc++
			}
			Multi_line()
		});

		// 多线条函数
		/**
		* 标记点
		* points 数据(经纬度)
		* index 索引值
		* jsonLast 每一个数组长度减去 1 
		**/
		function test(data, points, index, jsonLast) {
			// 创建折线
			polyline = new BMap.Polyline(points, {
											enableEditing: false,//是否启用线编辑，默认为false
   										enableClicking: true,//是否响应点击事件，默认为true
											strokeColor: data[index][0].color,// 设置颜色  
											strokeWeight: 6, // 宽度  
											strokeOpacity: 0.8, // 透明度 
											// strokeStyle: "dashed" // 设置是为实线或虚线，solid或dashed
										});
			map.addOverlay(polyline);  
			// 自定义消息窗口起点终点函数
			addMarkers(new BMap.Point(data[index][0].x, data[index][0].y),"起点", 15, -10, 0);
			addMarkers(new BMap.Point(data[index][jsonLast].x, data[index][jsonLast].y),data[index][jsonLast].carNumber, -8, -18, 1);
			/**
			 * 标记点函数
			 * @param {Object} point
			 * name 显示信息
			 * x y 定位值
			 * z 0代表起点 1代表终点
			 */
			function addMarkers(point,name, x, y, z){
				if(z == 1) {
					var myIcon = new BMap.Icon('./jc.png', new BMap.Size(52,52),{anchor : new BMap.Size(27, 27)}) //小汽车图标
					var marker = new BMap.Marker(point,{icon:myIcon});
					var label = new BMap.Label(name, {
						offset : new BMap.Size(x, y)
					});
				}else{
					var marker = new BMap.Marker(point);
					var label = new BMap.Label(name, {
						offset : new BMap.Size(x, y)
					});
				}
				marker.setLabel(label);
				map.addOverlay(marker);
			}
		}	
	</script>
</body>
</html>

ヽ错落不堪的年华。

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
百度地图API -自定义折线

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati...
复制链接

扫一扫