百度地图使用（1）——打点、连线、添加label层

最新推荐文章于 2025-05-28 15:18:26 发布

明致成

最新推荐文章于 2025-05-28 15:18:26 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏：百度地图文章标签：百度地图

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/LiyangBai/article/details/83060205

百度地图专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用Angular和BMap实现地图打点、添加label及路径绘制功能。通过自定义图标，为地图上的点添加信息丰富的标签，并利用Polyline连接各点形成路线。注意循环中创建元素时避免变量作用域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，首先上代码：

$scope.initMap = function(points){
	var map = new BMap.Map('pathTrackMap');
	var point = new BMap.Point(113.843216,27.687262);
	map.centerAndZoom(point,13);
    //设置地图
	map.enableDragging();
	map.enableScrollWheelZoom();
	map.enableDoubleClickZoom();
	map.enableKeyboard();
	map.clearOverlays();
    //创建点图层和label图层
	if(points && points.length){
	    for(var i=0, len = points.length; i<len; i++) {
            //自定义图标
	    	var pointIcon = new BMap.Icon(points[i].img,new BMap.Size(27,27));
            //将标注点转化为地图上的点
	        var point = new BMap.Point(points[i].lng, points[i].lat);
            //将点转化为标注点
	        var marker = new BMap.Marker(point,{icon:pointIcon});
            //添加点图层
	        map.addOverlay(marker);
	        (function() {
                //创建label图层
	        	var label = new BMap.Label(points[i].place,{position:point});
	            marker.addEventListener("mouseover",function() {
	            	map.addOverlay(label);
	            });
	            marker.addEventListener("mouseout",function() {
	            	map.removeOverlay(label);
	            });
	         })();
	    }
        //将所有点连线，连线图层polyline
		var line = [];
		for(var i=0; i<points.length; i++){
			line.push(new BMap.Point(points[i].lng, points[i].lat));
		}
		line.push(new BMap.Point(points[0].lng, points[0].lat));
		var polyline = new BMap.Polyline(line,{strokeColor:'#2a7cc1',strokeWeight:2,strokeOpacity:0.5});
		map.addOverlay(polyline);
	}
};
//假数据
var points = [
   {'lng':113.000000,'lat':27.000000,'img': '../img/a.png','place':'hahaha'},
   {'lng':113.111111,'lat':27.111111,'img': '../img/b.png','place':'lelele'},
   {'lng':113.222222,'lat':27.222222,'img': '../img/c.png','place':'dadada'},
];
$scope.initMap(points);

这是用angular写的一个初始化地图的函数，在地图上建立了三个图层：打点point、给点添加label图层、连线line

此处要注意的一个问题：再循环中打点，可能会导致每次循环的是最后一个i问题

（function(){

//..................................

})()

比如这段代码，所以要在里边创建label图层：var label = new BMap.Label(points[i].place,{position:point});