版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/LiyangBai/article/details/83060205
话不多说,首先上代码:
$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});