百度地图绘制折线，保存动态读取

最新推荐文章于 2025-07-13 16:52:21 发布

上山养老虎

最新推荐文章于 2025-07-13 16:52:21 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习总结文章标签：百度地图 api poyline

本文链接：https://blog.youkuaiyun.com/u013946285/article/details/60866507

学习总结专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用百度地图API创建地图实例并设置中心点坐标，通过JavaScript代码绘制个性化折线来表示个人轨迹，包括设置边线颜色、宽度、透明度等属性。

使用百度地图绘制地图，并且在地图上绘制折线形成个人轨迹，增加描述与名称，代码如下：

	//百度地图API功能
        map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
	map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

创建百度地图实例，

//添加地图控件
	var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
	var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
	var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
	map.addControl(top_left_control);        
	map.addControl(top_left_navigation);     
	map.addControl(top_right_navigation)；

在地图上添加空间

	var styleOptions = {

   	        strokeColor:"#4B0082",    //边线颜色。
   	        fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
   	        strokeWeight: 3,       //边线的宽度，以像素为单位。
   	        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
   	        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
   	        strokeStyle: 'solid' //边线的样式，solid或dashed。
   	  }
	 //实例化鼠标绘制工具
	      var drawingManager = new BMapLib.DrawingManager(map, {
	          isOpen: false, //是否开启绘制模式
	          enableDrawingTool: true, //是否显示工具栏
	          drawingToolOptions: {
	              anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
	              offset: new BMap.Size(5, 5), //偏离值
	              drawingModes: [            
	                       BMAP_DRAWING_POLYLINE
	                ]
	          },
	          polylineOptions: styleOptions, //线的样式
	      });

绘制折线后，保存为文件，每次动态读取代码如下：

 	var polylinePointsArray = [];
	for(var i = 0;i<result.length;i++){
	  polylinePointsArray.push(new BMap.Point(result[i].lng,result[i].lat));
	}
	objPolyline = new BMap.Polyline(polylinePointsArray, {strokeColor:"#4B0082", strokeWeight:3, strokeOpacity:0.8,fillOpacity: 0.6, strokeStyle: 'solid'});

循环遍历数据将数据组装起来，形成折线对象。使用map.addOverlay()添加之地图上，随后可以在地图中增加其他自定义方法这些就不贴代码。