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

最新推荐文章于 2023-05-26 11:13:54 发布

乡草

最新推荐文章于 2023-05-26 11:13:54 发布

阅读量2.7k

点赞数

本文链接：https://blog.csdn.net/BlowMoons/article/details/99542527

版权

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

图片：

第一层地图

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

下拉滚动条自动加载数据，滑动滚动条到底部自动加载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>
...

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',//文本框边框色

最低0.47元/天解锁文章

乡草

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
百度地图：层级地图、行政边界、圆形覆盖物、自定义覆盖物、可视化数据显示、放大及缩小、下拉滚动加载数据等...

写了一天，以下是我自己摸索出来的，暂时只做了两层地图，废话不多说，上图上代码图片：第一层地图点击圆形覆盖物或者放大地图进入第二层地图，缩放会回到第一层拖拽地图或者缩放地图会触发可视化数据下拉滚动条自动加载数据，滑动滚动条到底部自动加载6条html：(具体不贴出)<head> <script type="text/javascript" ...
复制链接

扫一扫