Javaweb在地图上创建标注，每次只查询当前页面显示地图范围内的坐标

最新推荐文章于 2023-08-18 21:47:30 发布

散装程序猿

最新推荐文章于 2023-08-18 21:47:30 发布

阅读量775

点赞数 1

分类专栏： JavaScript java 文章标签：百度 java ajax

本文链接：https://blog.csdn.net/qq_42684504/article/details/105989508

版权

java 同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

JavaScript

25 篇文章 1 订阅

订阅专栏

因为数据库中的数据有点儿多。然后在地图上创建标注的时候。如果一次将所有的数据都查询出来在地图上创建标注。会让地图非常卡。就是那种鼠标拖动几十秒延迟的那种。所以考虑在地图上显示的时候。不查询出所有的点位信息。

思路：
在地图上获取到当前地图显示级别的左下角和右上角的经纬度信息。以此来获取到最大和最小的经纬度。
然后去数据库中查询数据的时候只查询经纬度在这个范围内的所有点位信息。
在页面上给地图加上地图缩放和拖动的监听事件，当地图动了就使用ajax请求再次获取到经纬度范围然后请求后台再次查询。

首先先建立一个div容器来放百度地图，并且实例化百度地图

<head>
<title></title>
<style type="text/css">

body, html, #allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

/* 去掉百度地图logo */
.anchorBL {
	display: none;
}

</style>

<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=3.0&ak=0hT82pj7F8UQM9jkMEsVHeWn8rbN5XFn"></script>
	<script type="text/javascript"
	src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript"
	src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script
</head>
<body>
	<div id="allmap" style="min-height: 830px; max-height: 100%;"></div>

<script type="text/javascript">
	// 百度地图API功能    { enableMapClick: false }属性  设置景点点击不弹出窗口
	var map = new BMap.Map("allmap", { enableMapClick: false });    // 创建Map实例   
	map.centerAndZoom("郑州", 13);  // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>	
</body>

然后获取到当前层级的地图最大范围:


	var maxLng = "";	//最大经度
	var minLng = "";	//最小经度
	var maxLat = "";	//最大纬度
	var minLat = "";	//最小纬度
	var mapTier = 13;	//当前地图的层级
	
	//获取当前地图 最大范围和当前层级的方法
	function getMaxjwd() {
		var bs = map.getBounds();   //获取可视区域
		var bssw = bs.getSouthWest();   //可视区域左下角
		var bsne = bs.getNorthEast();   //可视区域右上角
		mapTier = map.getZoom();
		maxLng = bsne.lng;
		minLng = bssw.lng;
		maxLat = bsne.lat;
		minLat = bssw.lat;
	}

在地图上创建的标注，需要有窗口信息。当用户点击地图上的标注的时候。弹出一个小窗口显示详细信息。

//在线人员信息的窗口配置
	var adminsopts = {
			  width : 330,     // 信息窗口宽度
			  height: 180,     // 信息窗口高度
			  title : "运维人员信息" , // 信息窗口标题
			  enableMessage:true,//设置允许信息窗发送短息
			}

	//添加标注点击事件		
	function addClickHandlerForAdmins(marker,adminsData){
		marker.addEventListener("click",function(e){
			openadminsInfo(adminsData,e)}
		);
	}
	
	
	//鼠标点击事件  展开在线人员信息框
	function openadminsInfo(adminsData,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		
		var content = "<table  class='table table-border table-bordered' style='width:360px;background-color:#E8E8E8;'><tbody><tr><td align='center'>运维人员</td><td>" + adminsData.name
		+ "</td></tr><tr><td align='center'>手机号</td><td>" + adminsData.phone
		+ "</td></tr><tr><td align='center'>位置经度</td><td>" +adminsData.ddjd
		+ "</td></tr><tr><td align='center'>位置纬度</td><td>" +adminsData.ddwd
		+"</td></tr></tbody></table>";
		var infoWindow = new BMap.InfoWindow(content,adminsopts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}

添加地图的拖动和缩放的监听事件

	//地图缩放监听时间
	map.addEventListener("zoomend", function(e){
		timingTask();  //发送请求  根据地图范围查询车辆位置信息
	});
	
	//地图拖动监听事件
	map.addEventListener("dragend", function showInfo(){
		timingTask();	//发送请求  根据地图范围查询车辆位置信息
	});
	
	
	function timingTask() {
		getMaxjwd();  //获取当前地图视图的最大范围
		//console.log("当前地图可视范围是：" + minLng + "," + minLat + "到" + maxLng + "," + maxLat+"当前地图层级为："+mapTier)
		$.ajax({
			url : "ajax请求的url",
			type : "post",
			data: { maxLng: maxLng, minLng: minLng, maxLat: maxLat, minLat: minLat },   //传最大最小经纬度
			success : function(dataList) {
				var points = [] ;
				//console.log(dataList)
				map.clearOverlays();
				
				var adminsArray = eval(dataList);
				//console.log(adminsArray)
				//添加标注
				for (var i = 0; i < adminsArray.length; i++)
				{
					var admin = adminsArray[i];
					var lng = admin.ddjd;//经度
					var lat = admin.ddwd;//纬度
					var point = new BMap.Point(lng, lat);
					var myIcon = new BMap.Icon('/common/resource/images/人物.png', new BMap.Size(30,32));//标注的图片
					var marker = new BMap.Marker(point,{icon:myIcon});
					map.addOverlay(marker);              //将标注添加到地图中
					//点击标注之后展开的窗口
					addClickHandlerForAdmins(marker,admin,point);
					marker.setTitle(admin.name);
					//点位聚合的数组
					points.push(marker);
					
				}
				//map.setViewport(points);
				//生成一个marker数组，然后调用markerClusterer类即可。   这一步是为了聚合点
				var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:points});
			}
		});
	}

关于点位聚合：
就是当地图缩的很小的时候有多个标注会重合。这个时候就需要聚合点了。
效果图：

点击聚合点会放大地图

页面部分大致就这样了。接下来就是后台部分了。

后台部分没什么说的，主要就是接收到前端传的经纬度范围参数，然后去数据库中查就行了。

关于根据经纬度范围数据库查询：

首先你的经纬度字段必须是double类型的，然后使用between and查询就行了。
如下：

SELECT * FROM a_table_name where ddjd BETWEEN #{minLng} AND #{maxLng} and ddwd BETWEEN #{minLat} AND #{maxLat}

散装程序猿

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录