一，话不多说，先看效果
1.1 首先看到的效果是聚合后的点位，并且支持点击查看车辆当时的情况（聚合点样式）
1.2 可以拖动放大地图。其实就是改变了展示级别，同时也支持点击查看详情（聚合点样式）
1.3 当放到 最小颗粒 展示的才是（标点样式）
1.4 最后看个完整的样子，下面还有一个 所有点位的列表集合
二，用到的内容
2.0.思路：聚合点的时候，获取某个聚合点下面的markers。
然后获取第一个marker 里面的 内容（坐标，图片旋转角度，车牌号 等信息）用来给聚合点做样式的时候使用。
灵感 参考了这篇文章（万分感谢）：百度地图中自定义点聚合实现_百度地图 聚合图层 标注_想吃变态辣条的博客-CSDN博客
2.1 marker可以自定义传参数
marker.carNum=“苏E2345”； 后面直接 marker.carNum 就可以取到车牌号
2.2.Vue百度地图maker标注的添加和删除（）
const lng = parseFloat(e.longitude)
const lat = parseFloat(e.latitude)
const point = new BMap.Point(lng, lat)
const marker = new BMap.Marker(point)
map.addOverlay(marker)
marker.setPosition(point)//添加标注
//删除标注文档上注明了是removeOverlay()这个方法，具体使用如下
marker.id = data[0].id//给marker添加id对应数组里的id（非必要不要赋值id，不要这么写）
const allOverlays = map.getOverlays()//返回地图上所有的覆盖物
//循环找到数组里面id和返回覆盖物相同的
for (let i = 0; i < allOverlays.length; i++) {
if (allOverlays[i].id == data[0].id) { //data[0].id即是你要删除标注的id
map.removeOverlay(allOverlays[i])
}
}
2.3用到的api
2.4 特别的方法
var myIcon = new BMap.Icon('https://y.com/yzz/9.png', new BMap.Size(15, 18));
var point = new BMap.Point(p.longitude,p.latitude);
//打点并标记旋转角度
var _marker = new BMap.Marker(point, {icon: myIcon,rotation:p.angle});
// 拿到所有的聚合点 //markerClusterer中的 _clusters是一个数组，包含了可视范围的所有聚合点 var cluster = markerClusterer._clusters;
三，代码展示
3.1 代码写的有点乱望见谅
3.2 引用的js
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=iOcuXeUHMaif7qM9szGq7xrHGiztE3d6"></script>
<!-- 路书功能 -->
<script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>
<!-- 聚合点 -->
<script type="text/javascript" src="//api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>3.3 业务代码
<script th:inline="javascript">
var prefix = ctx + "business/car";
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(121.01230133514115,31.270734366088245), 14); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);
var markerClusterer;
function insterGPS(){
$.modal.loading("正在加载数据，请稍候...");
//清除打点
map.centerAndZoom(new BMap.Point(121.01230133514115,31.270734366088245), 14);
var table= document.getElementById("test_tbody");
var innerHTML= "";
var startTime=$('#startTime').val();
var endTime=$('#endTime').val();
var carId=$('#carId').val();
console.log("开始车辆-->"+carId);
$.ajax({
url: prefix + '/single/trajectory/list',
type: "post",
dataType: "json",
data: { "startTime":startTime,"endTime":endTime,"carId":carId},
success: function (result) {
if (result.code == 0) {
var data=result.data;
if(data){
//循环车辆轨迹
var veh = data[0];//获取LIST里面的对象
if(null === veh.positionX){
map.centerAndZoom(new BMap.Point(121.01230133514115,31.270734366088245), 14);
map.clearOverlays();
table.innerHTML="";
}else{
map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(veh.positionX,veh.positionY), 14); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//坐标集合
var gpsList=veh.eventGpsInfoList;
if(gpsList!=null){
var paths = [];
var markers = [];
for(var i = 0;i<gpsList.length;i++) { //循环轨迹
var p = gpsList[i];
// console.log(p);
//创建折线点
var point = new BMap.Point(p.longitude,p.latitude);
paths.push(point);
// console.log(p.longitude+"||"+p.latitude);
// 创建点标记
var sContent =
"<div class='baiduPopBox' style='height: 30px; color: rgb(255, 255, 255);background-color: rgb(64, 150, 209);padding: 5px;width: 440px;'>"
+ p.createTime
+ "</div>"
+ "<table class='boxTop' style='width: 440px;'>"
+"<tr>"
+"<td style='width: 70px;height: 30px;color: rgb(44, 120, 191);background-color: #f1f1f1;'> 车牌号" +"</td>"
+"<td style='width: 150px;'>"+veh.carNum+"</td>"
+"<td style='width: 70px;height: 30px;color: rgb(44, 120, 191);background-color: #f1f1f1;'> 速度" +"</td>"
+"<td style='width: 150px;'>"+p.speed+" 公里/小时</td>"
+ "</tr>"
+"<tr>"
+"<td style='width: 70px;height: 30px;color: rgb(44, 120, 191);background-color: #f1f1f1;'> 地址" +"</td>"
+"<td colspan='3'>"+p.address+"</td>"
+ "</tr>"
+ "</table>";
createMark = function(lng, lat, info_html,createTime,carNum,speed,address) {
var myIcon = new BMap.Icon('https://yzz.oss-cn.com/y/9.png', new BMap.Size(15, 18));
var point = new BMap.Point(p.longitude,p.latitude);
//打点并标记旋转角度
var _marker = new BMap.Marker(point, {icon: myIcon,rotation:p.angle});
_marker.createTime=createTime;
_marker.carNum=carNum;
_marker.speed=speed;
_marker.address=address;
_marker.angle=p.angle;
_marker.addEventListener("click", function(e) {
this.openInfoWindow(new BMap.InfoWindow(info_html));
this.setIcon(new BMap.Icon('https://yzz.oss-cn.com/y/7.png', new BMap.Size(31, 31)));
this.setRotation(this.getRotation())
});
_marker.addEventListener("infowindowclose", function(e) {
this.setIcon(new BMap.Icon('https://yzz.oss-cn.com/y/9.png', new BMap.Size(15, 18)));
this.setRotation(this.getRotation())
});
return _marker;
};
var marker1 = createMark(p.longitude,p.latitude, sContent,p.createTime,veh.carNum,p.speed,p.address);
markers.push(marker1);
//给列表数据
innerHTML= innerHTML+"<tr style='display: table;width: 100%;'>" +
" <td class='td2' style='width: 5%;'>"+i+"</td>" +
"<td class='td1' style='width:15%;'><img src='https://yzz.oss-cn.com/y/7.png' title='在线-行驶' style='max-width: 20px;max-height: 20px;vertical-align: middle;transform: rotate("+p.angle+"deg);'></td>" +
"<td class='td2' style='width: 15%;'>"+p.speed+"</td>" +
"<td class='td2' style='width: 15%;'>"+p.createTime+"</td>" +
"<td class='td3' style='width: 50%;'>"+p.address+"</td>" +
"</tr>"
}
//地图添加聚合点
markerClustersPoint(markers);
//地图缩放重新计算聚合点
map.addEventListener("zoomend",function(){
markerClustersPoint(markers);
});
//底部列表添加数据
table.innerHTML=innerHTML;
//添加折线
var polyline = new BMap.Polyline(paths, {
enableEditing: false,//是否启用线编辑，默认为false
enableClicking: true,//是否响应点击事件，默认为true
icons:[],
strokeWeight:'2',//折线的宽度，以像素为单位
strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
strokeColor:"#416EBF" //折线颜色
});
map.addOverlay(polyline);
}
}
}
} else{
console.log("异常");
layer.msg(result.msg, {icon: 2});
$.modal.closeLoading();
}
$.modal.closeLoading();
}
})
console.log("结束-车辆")
}
var oldmk = [];
//聚合添加
function markerClustersPoint(markers) {
if (markerClusterer) {
// console.log("清除聚合前。",markerClusterer);
markerClusterer.clearMarkers();//清除聚合
// console.log("清除聚合后。",markerClusterer);
}
// 老点位 去除
if(oldmk.length != 0){
for (var i = 0; i < oldmk.length; i++) {
map.removeOverlay(oldmk[i])
}
oldmk = [];
}
//添加点聚合API(index.html中需引入文件)
markerClusterer = new BMapLib.MarkerClusterer(this.map, {
markers: markers,
minClusterSize: 3, //最小的聚合数量，小于该数量的不能成为一个聚合，默认为2
styles: [
{
//此处仅放置style，不要写任何内容，否则会有默认聚合的数字显示溢出
}
]
});
// console.log("进入聚合函数markerClusterer", markerClusterer);
// 拿到所有的聚合点
//markerClusterer中的 _clusters是一个数组，包含了可视范围的所有聚合点
var cluster = markerClusterer._clusters;
// console.log("进入聚合函数cluster", cluster);
for (var i = 0; i < cluster.length; i++) {
//cluster[i]._markers中包含此聚合点的所有marker集合
//marker长度大于2时不进行聚合效果显示
if (cluster[i]._markers.length < 2) continue;
//自定义函数内容，可进行聚合点数据获取操作
//......
//cluster[i]._markers[0] 就是获取的第一个点，里面放有车牌号，速度 等信息
//......
//拿到聚合点中的marker数量，用于数字显示
var cluserMakerSum = cluster[i]._markers.length;
//添加marker
oldmk.push(addMarkerCluser(cluster[i]._center,cluserMakerSum,cluster[i]._markers[0]));
}
}
// 标记自定义marker
function addMarkerCluser(point,cluserMakerSum,marker) {
// console.log("标记自定义marker===>");
// console.log(point);
var myIcon2 = new BMap.Icon('https://yzz.oss-cn.com/y/9.png', new BMap.Size(15, 18));
//打点并标记旋转角度
var markerdef = new BMap.Marker(point, {
// icon: 设置marker样式
icon: myIcon2,rotation:marker.angle
});
//设置marker的label
var labelTitleCluser = cluserMakerSum;
let label = new BMap.Label(labelTitleCluser, {
offset: new BMap.Size(12, 12)
});
//设置label样式
label.setStyle({
color: "#fff",
fontSize: "14px",
backgroundColor: "0.05",
border: "0px "
});
markerdef.setLabel(label);
var sContent2 =
"<div class='baiduPopBox' style='height: 30px; color: rgb(255, 255, 255);background-color: rgb(64, 150, 209);padding: 5px;width: 440px;'>"
+ marker.createTime
+ "</div>"
+ "<table class='boxTop' style='width: 440px;'>"
+"<tr>"
+"<td style='width: 70px;height: 30px;color: rgb(44, 120, 191);background-color: #f1f1f1;'> 车牌号" +"</td>"
+"<td style='width: 150px;'>"+marker.carNum+"</td>"
+"<td style='width: 70px;height: 30px;color: rgb(44, 120, 191);background-color: #f1f1f1;'> 速度" +"</td>"
+"<td style='width: 150px;'>"+marker.speed+" 公里/小时</td>"
+ "</tr>"
+"<tr>"
+"<td style='width: 70px;height: 30px;color: rgb(44, 120, 191);background-color: #f1f1f1;'> 地址" +"</td>"
+"<td colspan='3'>"+marker.address+"</td>"
+ "</tr>"
+ "</table>";
//监听点击事件
markerdef.addEventListener("click", function() {
console.log("点击自定义聚合maker");
this.openInfoWindow(new BMap.InfoWindow(sContent2));
this.setIcon(new BMap.Icon('https://yzz.oss-cn.com/y/7.png', new BMap.Size(31, 31)));
this.setRotation(marker.angle);
});
markerdef.addEventListener("infowindowclose", function(e) {
this.setIcon(new BMap.Icon('https://yzz.oss-cn.com/y/9.png', new BMap.Size(15, 18)));
this.setRotation(this.getRotation())
});
map.addOverlay(markerdef);
return markerdef;
}
</script>3.4 两个图片
7.png
9.png
7568
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
