百度地图自定义覆盖物/鼠标悬停显示行政区

闲来无事垂钓

已于 2022-08-15 16:17:37 修改

阅读量2.2k

点赞数 1

分类专栏：百度地图文章标签：百度地图自定义覆盖物百度地图行政区百度地图鼠标悬停 javascript

于 2021-03-28 12:48:33 首次发布

本文链接：https://blog.csdn.net/qq_39109182/article/details/115278949

版权

百度地图专栏收录该内容

4 篇文章 2 订阅

订阅专栏

完整代码：js鼠标悬停高亮显示行政区/地图自定义覆盖物/地图api-Javascript文档类资源-CSDN下载js百度地图自定义覆盖物/鼠标悬停行政区域高亮显示更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/qq_39109182/67509521

效果

jjson,地图上的区域时通过接口返回的数据,根据自己需要可以造一个假数据

{
"status": "200",
"msg": "OK",
"isPC": 1,
"data": [
    {
        "id": 6,
        "name": "朝阳",
        "count": 14036,
        "x": 116.49674,
        "y": 39.93258
    },
    {
        "id": 5,
        "name": "海淀",
        "count": 4147,
        "x": 116.32949,
        "y": 39.99316
    }
]
}

html部分

<div class="adrMapHouse">
	<div id="map_house"></div>
</div>

css部分，可以根据自己需求改

<style>
*{margin: 0;padding: 0;}
ul li,ul ol{list-style: none;}
i,b,em,strong{font-style: normal;}
html,body{height:100%;}
#map_house{width:100%;height:100%;position: absolute;top:0;left:0;}
.BMap_Marker img{width:100%;}/* 自定义点图片适应宽高 */

.adrMapHouse{position:relative;margin:10px;height:100%;}
.map-class{background:rgba(0,0,0,0.7);height:30px;line-height: 30px;color:#fff;width:100%;position: absolute;bottom:0;left:0;}
.map-class li{float:left;width:20%;text-align: center;}

.resultsDiv{width:90px;height:40px;line-height:20px;padding:25px 0;color:#fff;border-radius:50%;text-align:center;background:#ffaf00cc;cursor: pointer;font-size:14px;}
.results_name{font-size:16px;}
.area_bgred{background:#fb5033bd;}
</style>

js部分

页面首先引入百度js,

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=自己的key"></script>

<script type="text/javascript">	
let cityid=1//接口需要参数
let tempNub=1// 接口需要的参数
let houseApi=数据接口地址  

let cityname='北京'
let plyList = [];//鼠标滑过显示行政区用
let longitude = '116.39147'; //x  121.500463486  116.39147
let latitude = '39.90555'; //  31.2359216994  39.90555
let areaDataMap //区域（接口返回数据）

let levelmap = 11;//显示级别
let icon = new BMap.Icon("images/x_adr_icon.png",new BMap.Size(42,53));  //自定义当前位置图标
let baiduMap = new BMap.Map("map_house");//创建地图
let myPoint = new BMap.Point(longitude,latitude);//创建地图坐标点,一般首次创建的这个点为地图的中心坐标点
let marker = new BMap.Marker(myPoint, { icon: icon });//创建自定义标注

// 添加控件 
let navigationControl = new BMap.NavigationControl({
    anchor: BMAP_ANCHOR_BOTTOM_RIGHT,//表示控件定位于地图的右下角
    type: BMAP_NAVIGATION_CONTROL_SMALL,//表示显示小型的平移缩放控件
    enableGeolocation: false// 启用显示定位
})
//控件   //BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。
//类型   //BMAP_NAVIGATION_CONTROL_LARGE 表示显示完整的平移缩放控件。BMAP_NAVIGATION_CONTROL_SMALL 表示显示小型的平移缩放控件。BMAP_NAVIGATION_CONTROL_PAN 表示只显示控件的平移部分功能。BMAP_NAVIGATION_CONTROL_ZOOM 表示只显示控件的缩放部分功能。

baiduMap.addControl(navigationControl); //添加控件

baiduMap.centerAndZoom(myPoint,levelmap);//初始化地图，设置中心坐标点和地图级数
// baiduMap.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
baiduMap.addOverlay(marker);//方法addOverlay() 向地图中添加覆盖物
// baiduMap.enableKeyboard();//启动键盘操作地图

getQyData()//1级区域数据  自己请求接口返回数据的方法
baiduMap.clearOverlays();//清除所有的Overlay
baiduMap.addOverlay(marker);//初始化地图,设置中心点坐标和地图级别

function getQyData(){//1级区域
	$.ajax({
	    url:houseApi,
	    type: "post",
	    dataTyoe:'json',
	    data:{city:cityid,tempNub:tempNub},
	    success:function(res){
			if(res.status==200){
				console.log('区域数据',res.data)
				areaDataMap=res.data
				for (let i = 0; i < areaDataMap.length; i++) {
                    //可以这样在地图插入接口返回的内容，也可以用下面注释的 自定义返回内容
					let div_Point = new BMap.Point(areaDataMap[i].x,areaDataMap[i].y); 
					// console.log('div_Point',div_Point.lat)
					let pixel = baiduMap.pointToOverlayPixel(div_Point);
					let div = document.createElement("div");
					
					div.style.position = "absolute";
					div.style.zIndex = BMap.Overlay.getZIndex(div_Point.lat);
					div.style.left = pixel.x + "px";
					div.style.top  = pixel.y + "px";
					div.className='resultsDiv'
					div.style.MozUserSelect = "none";
					// div.areaname=areaData.name
					div.innerHTML = `<div class="results_name">${areaDataMap[i].name}</div><div class="results_num">${areaDataMap[i].count}</div>`
					baiduMap.getPanes().labelPane.appendChild(div);
					
					let bdary = new BMap.Boundary();
					// 鼠标划入
					div.onmouseenter = function(){//mouseenter不支持冒泡，而mouseover支持冒泡
					  $(this).addClass('area_bgred');
					  // console.log('js------',districtBound['亦庄'])
					  bdary.get(`${cityname}${areaDataMap[i].name}`, function(rs){ 
						// console.log('+++++',`${cityname}${areaDataMap[i].name}`)
						let count = rs.boundaries.length; //行政区域的点有多少个  行政区的边界有些缺失，需要自己手机边界集合点，比如北京亦庄，属于大兴，单独收集了边界集合点  bj.js
						// console.log('count--',rs)
					    let bdaryStyle = {
					        strokeWeight:3,
					        strokeColor: "#fb5033",
					        fillOpacity: 0.7
					    };
					    // let ply = new BMap.Polygon(rs.boundaries[0], bdaryStyle);//建立多边形覆盖物
						let ply
						if(`${areaDataMap[i].name}`=='亦庄'){
							// console.log('亦庄',districtBound['亦庄'])
							ply = new BMap.Polygon(districtBound['亦庄'], bdaryStyle);//建立多边形覆盖物
						}else{
							// console.log('其他',rs.boundaries[0])
							ply = new BMap.Polygon(rs.boundaries[0], bdaryStyle);//建立多边形覆盖物
						}
						// console.log('ply',ply)
						
					    ply.plyid = areaDataMap[i].id;
					    ply.disableMassClear();
					      
					    if (plyList[areaDataMap[i].id]) {
							// console.log('111',plyList[areaDataMap[i].id])
							baiduMap.removeOverlay(plyList[areaDataMap[i].id]);
					    }
						
					    baiduMap.addOverlay(ply); //添加覆盖物
					    plyList[areaDataMap[i].id] = ply;
					  });
					  $(this).css("z-index","100").siblings().css("z-index","99");
					}
					// 鼠标移出
					div.onmouseleave = function () {//onmouseout
						$(this).removeClass('area_bgred');
					    clearPly(baiduMap,plyList,'mouseleave')	 //清除地图覆盖物     				 
					};
					
					
					
					
					
					/*自定义返回内容*/
					// var zhoubian_Point = new BMap.Point(areaDataMap[i].x,areaDataMap[i].y); // 创建点坐标
					// var zhoubian_marker = new BMap.Marker(zhoubian_Point);  // 创建标注
					// var resultsLabelCon = `<div class="resultsDiv"><div class="results_name">${areaDataMap[i].name}</div><div class="results_num">${areaDataMap[i].count}</div></div>`;
					// var opts = {
					//   position : zhoubian_Point,  // 指定文本标注所在的地理位置
					//   offset   : new BMap.Size(0, 0)    //设置文本偏移量,文案位移的位置 左右/上下
					// }
					
					// var resultsLabel = new BMap.Label(resultsLabelCon,opts);// 创建文本标注对象
					
					// resultsLabel.setStyle({
					// 	cursor: 'pointer',
					// 	padding:0,
					// 	background:'none',
					// 	border: 'none',
					// 	'-ms-transform': 'translateX(-50%)',
					// 	'-moz-transform': 'translateX(-50%)',
					// 	'-webkit-transform': 'translateX(-50%)',
					// 	'-o-transform': 'translateX(-50%)',
					// 	transform: 'translateX(-50%)'
					// });
					// resultsLabel.setZIndex(9);
					// zhoubian_marker.setLabel(resultsLabel);
					// resultsLabel.setZIndex(2);//resultsLabel地图层级
					// baiduMap.addOverlay(resultsLabel);//方法addOverlay() 向地图中添加覆盖物
					/*自定义返回内容 end*/	
				}	
			}
	    }
	})
}


  //清除行政区划
function clearPly(mapobj,plyList,type) {
    for (var ply in plyList) {
        mapobj.removeOverlay(plyList[ply]);
        delete plyList[ply];
    }
}

</script>

关于地图获取行政区域，官方有api可以自行查看 https://lbsyun.baidu.com/jsdemo.htm#c1_10

亦庄的行政区域没有，我就自己找找了一个bj.js，内容