百度地图：层级地图、行政边界、圆形覆盖物、自定义覆盖物、可视化数据显示、放大及缩小、下拉滚动加载数据等..._百度地图覆盖物冒泡

作者：正经夜光杯 | 2024-07-23 02:37:54

踩

百度地图覆盖物冒泡

写了一天，以下是我自己摸索出来的，暂时只做了两层地图，废话不多说，上图上代码

图片：

第一层地图

在这里插入图片描述

点击圆形覆盖物或者放大地图进入第二层地图，缩放会回到第一层

在这里插入图片描述

拖拽地图或者缩放地图会触发可视化数据

在这里插入图片描述

下拉滚动条自动加载数据，滑动滚动条到底部自动加载6条

在这里插入图片描述

html：(具体不贴出)

<head>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=oXteNBUCZuMQssdhi4eZlcGF2pTGSoX5"></script>
	<script src="../js/house/map.js"></script>
</head>
<body>
	<div class="map-container fl" id="container"></div>
    <div class="map-container fl" id="container_two" style="display: none;"></div>
</body>
...
1
2
3
4
5
6
7
8
9

JS：(map.js)

第一层地图（因为第二层地图两种写法，所有拆开写）
注意：
fillColor：不给值表示不填充，这样就不会影响区划里的遮盖物了，也可以给填充色并设置透明度

$(document).ready(function(){
		var point = new BMap.Point(120.165366,30.286491);
		...
		init(json,point);
});

var map = "";//第一层
var map2 = "";//第二层
var jsons;

/**
 * 第一层地图
 * json：后台返回的json数据（楼盘表：楼盘的基本信息和经纬度）
 * area_json：后台返回的区域数据（区域表：区域的基本信息和经纬度）
 * 	类似以下：
 * //区域
 *	var area_json = [{id:15,area_name:"杭州",longitude:"120.165366",latitude:"30.286491"},{id:16,area_name:"金华",longitude:"119.627245",latitude:"29.111935"},{id:17,area_name:"宁波",longitude:"121.483073",latitude:"29.828361"}];
 */
function init(json,point){
	jsons = json;
	// 创建Map实例
	map = new BMap.Map("container");
	map.centerAndZoom(point, 10);
	map.setMinZoom(10);//设置缩放最小级别
	map.addControl(new BMap.MapTypeControl({//添加控件
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));	
	map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
	
	//遍历区域
	for (var i in area_json) {
		cover(area_json[i]);
	}
}

/**
 * 第一层地图覆盖物
 * @param obj
 */
function cover(obj){
	var point = new BMap.Point(obj.longitude,obj.latitude);
	//创建圆形覆盖物
	var circle = new BMap.Circle(point,20000,{
		fillColor:"#486090",strokeWeight:1,fillOpacity:0.9,strokeOpacity:0,strokeColor:"#486090"
	});

	//获取楼盘数
	$.post("/house_count" , {id : obj.id} , function(count){
		if(count == 0){//没有楼盘的区域不显示
			return;
		}
		// 创建文本标注对象
		var label = new BMap.Label("<p style='text-align:center'>"+obj.area_name+"</p><p style='text-align:center'>"+count+"个楼盘</p>", {
			position : point,// 指定文本标注所在的地理位置
			offset   : new BMap.Size(-25, -16)    //设置文本偏移量
		}); 
		//设置文本标注属性
		label.setStyle({
			color : "#FFF",
			backgroundColor:'transparent',//文本背景色
			borderColor:'transparent',//文本框边框色
			fontSize : "10px",
			height : "12px",
			lineHeight : "15px",
			fontFamily:"微软雅黑"
		});

		//行政区域边界
		function getBoundary(){     
			var bdary = new BMap.Boundary();
			bdary.get(obj.area_name, function(rs){       //获取行政区域
				map.clearOverlays();        //清除地图覆盖物       
				var count = rs.boundaries.length; //行政区域的点有多少个
				if (cou
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/867777

百度地图：层级地图、行政边界、圆形覆盖物、自定义覆盖物、可视化数据显示、放大及缩小、下拉滚动加载数据等..._百度地图覆盖物 冒泡

图片：

html：(具体不贴出)

JS：(map.js)

百度地图：层级地图、行政边界、圆形覆盖物、自定义覆盖物、可视化数据显示、放大及缩小、下拉滚动加载数据等..._百度地图覆盖物冒泡