根据不同用户的需求，在程序中使用百度地图API被要求会显示/隐藏不同的图层。
比如A用户想显示人员位置，不想显示汽车位置；B用户想显示汽车位置，不想显示人员位置。但是有时候A用户又想看看汽车的位置，这种情况下，自定义显示与隐藏图层将会是一个比较好的解决方式。
以下为解决方案（前提是已经初始化好百度地图）。
1.html（css样式需要自己编写）
<div id="checkBox">
<div>
<label for="showPeople">
<input type="checkbox" name="showPeople" id="showPeople">
<img src="/image/people.png" alt="">显示人员
</label>
</div>
<label for="showCars">
<input type="checkbox" name="showCars" id="showCars"/>
<img src="/image/car.png" alt="">显示汽车
</label>
</div>
</div>
2.js
/* -------------查询打点数据开始--------------- */
//用于存储人员、汽车打点信息
var peopleMark = [];
var carMark = [];
/**
* 查询人员相关信息，返回Map<String,Object>,points中包含longitude（精度）、latitude（纬度）及pid（人员ID）等
*/
function getAllPeoplePoint(){
$.ajax({
url : '/demo/getAllPeoplePoint',
type : 'get',
data : {
pid : pid
},
success : function (data) {
var points = data.points;
if(points.length != 0){
markPoint(points,1);
}
},
error : function (){
}
})
}
/**
*查询汽车相关信息，返回Map<String,Object>,points中包含longitude（精度）、latitude（纬度）及cid（汽车ID）等
*/
function getAllcarPoint(){
$.ajax({
url : '/demo/getAllcarPoint',
type : 'get',
data : {
cid : cid
},
success : function (data) {
var points = data.points;
if(points.length != 0){
markPoint(points,2);
}
},
error : function (){
}
})
}
/* -------------查询打点数据结束--------------- */
/* -------------地图自定义图层显示隐藏开始--------------- */
//显示人员图层
$("#showPeople").click(function() {
if($(this).is(":checked")== true) {
getAllPeoplePoint();
}else{
for(var i = 0;i < peopleMark.length;i ++){
map.removeOverlay(peopleMark[i]);
}
}
});
//显示汽车图层
$("#showCars").click(function() {
if($(this).is(":checked")== true) {
getAllCarsPoints();
}else{
for(var i = 0;i < carMark.length;i ++){
map.removeOverlay(carMark[i]);
}
}
});
/* -------------地图自定义图层显示隐藏结束--------------- */
/* -------------公共方法开始--------------- */
/**
* 公共打点方法
* @param points
* @param flag 1人员，2汽车
*/
function markPoint(points,flag){
for(var i = 0;i < points.length;i ++){
var icon = '';
if(flag == 1){
icon = '/image/people.png';
showPoint(points[i],icon,flag);
}else if(flag == 2){
icon = '/image/car.png';
showPoint(points[i],icon,flag);
}
}
}
/**
* 将坐标打到地图上
* @param points
* @param icon
* @param flag 1人员，2汽车
*/
function showPoint(points,icon,flag){
var point = new BMap.Point(points.longitude,points.latitude);
if(flag == 1){
var myIcon = new BMap.Icon(icon,new BMap.Size(30, 30));
}else{
var myIcon = new BMap.Icon(icon,new BMap.Size(30, 80));
}
var marker = new BMap.Marker(point,{icon: myIcon});
marker.addEventListener("click", function(){
//此处可定义点击图标是的相关方法，比如点击图标打开详情弹窗等
// openModel(points,flag);
console.log(points)
});
map.addOverlay(marker);
saveMarker(marker,flag);
}
/**
* 存储打点的数据
* @param marker
* @param flag 1人员，2汽车
*/
function saveMarker(marker,flag){
if(flag == 1){
peopleMark.push(marker);
}else if(flag == 2){
carMark.push(marker);
}
}
/* -------------公共方法结束--------------- */
3.后台接口实现数据支持
业务逻辑根据需求编写就可以。
完成以上步骤以后，在地图上就可以根据选择框是否选择来显示不同的图层。
