根据经纬度在地图上添加标记，实现登陆用户分布地理位置，显示用户信息

最新推荐文章于 2024-03-26 13:25:28 发布

大数据左右手

最新推荐文章于 2024-03-26 13:25:28 发布

阅读量3.4k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/Hello_Java2018/article/details/82776140

版权

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

实现登陆用户分布地理位置标注，可以显示用户信息

实现如图所示的功能

直接上干货（整个html网页）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>根据经纬度在地图上添加标记</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 加载OpenLayers 类库 -->
<script type="text/javascript" src="http://www.openlayers.cn/olapi/OpenLayers.js">	
</script>
<!--jquery库 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
      body,html{
        width:99%;
        height: 100%;
        font-family: "arial, helvetica, sans-serif";
        font-size: x-large;
        font-kerning: inherit;
        font-stretch: expanded;
      }
      #map{
        height: 530px;
        font-size: 14px;
        font-family: "微软雅黑";
        backface-visibility: visible;
        background-blend-mode: inherit;
        background-origin: border-box;
        background: content-box;
      }
    </style>
<script type="text/javascript">	
$(document).ready(function() {
	init();
})
	function init() {
		var option = {
			controls : [ new OpenLayers.Control.Navigation(), //导航  
			new OpenLayers.Control.PanZoomBar(), //放大缩小  
			new OpenLayers.Control.Scale(), new OpenLayers.Control.ScaleLine(),
					new OpenLayers.Control.OverviewMap() ],
			numZoomLevels : 15
		//,//最大级别  
		};
		map = new OpenLayers.Map('map', option);
		layer = new OpenLayers.Layer.WMTS({
			name : "中国底图(矢量)", //测试地址  
			url : "http://t0.tianditu.com/vec_c/wmts", //中国底图   
			layer : "vec",
			style : "default",
			matrixSet : "c",
			format : "tiles",
			isBaseLayer : true
		});
	
		//测试使用，正式环境去掉  
		var tdt2 = new OpenLayers.Layer.WMTS({
			name : "中国底图注记",
			url : "http://t0.tianditu.com/cva_c/wmts", //中国底图注记   
			layer : "cva",
			style : "default",
			matrixSet : "c",
			format : "tiles",
			isBaseLayer : false
		});

		map.addLayers([ layer, tdt2 ]);
		//从服务器获取用户数据进行绑定
		$.ajax({
			type : "POST",
			url : "请求接口",
			data : {
				"pageNumber" : "1" ,
				"pageSize" : "100" 
			},
			dataType : "JSON",
			async : false,
			success : function(data) {
				$.each(data, function(i, item) {
					popupClass = OpenLayers.Popup.Anchored;   
					addMarker(经度,纬度,popupClass, false,"<b>"+item.nickname（自己拼装用户信息）+"</b>");//添加标记  
				});
			},
			error : function() {
				alert("Error");
			}
		});
		map.setCenter(new OpenLayers.LonLat(116.5, 40).transform(
				new OpenLayers.Projection("EPSG:4326"), map
						.getProjectionObject()), 8);//默认放大级别7  
		//map.zoomToMaxExtent();   
		//显示鼠标位置坐标  
		map.addControl(new OpenLayers.Control.MousePosition({
			displayProjection : 'EPSG:4326'
		}));

	}

	//添加标记  
	function addMarker(longitude,latitude,popupClass, closeBox,popupContentHTML,overflow) {
		var markers = new OpenLayers.Layer.Markers("分站");
		//设置显示坐标  
		var x = 0, y = 0;
		//北京  
		//图片显示  
		var icon = new OpenLayers.Icon('显示标注的小红点的图片路径, {
			w : 21,
			h : 25
		}, {
			x : -10.5,
			y : -25
		});
		var feature = new OpenLayers.Feature(markers, new OpenLayers.LonLat(
			longitude, latitude).transform(
				new OpenLayers.Projection("EPSG:4326"), map
					.getProjectionObject()), {
				'icon' : icon
			});
		var marker = feature.createMarker(); 
		feature.closeBox = closeBox;  
        feature.popupClass = popupClass;  
        feature.data.popupContentHTML = popupContentHTML ;  
        feature.data.overflow = (overflow) ? "auto" : "hidden";  
        var markerClick = function (evt) {  
            if (this.popup == null) {  
			    this.createPopup(this.closeBox); 
                this.popup.setBackgroundColor("#E2E7EB"); 
                this.popup.setBorder("1px #0066ff solid");  
				this.popup.setSize(new OpenLayers.Size(80,24))
                map.addPopup(this.popup);  
                this.popup.show();  
            } else {  
                this.popup.toggle();  
            }  
            currentPopup = this.popup;  
            OpenLayers.Event.stop(evt);  
        };  
		var mousOut = function onPopupClose(evt) {
            map.removePopup(this.popup);
            this.popup.destroy();
            this.popup = null;
        } 
        marker.events.register("mouseover", feature, markerClick); 
		marker.events.register("mouseout", feature, mousOut);		
        markers.addMarker(marker);  
		map.addLayer(markers);  
	}
</script>
</head>
<body class="page-container-bg-solid page-header-menu-fixed page-md">
<div th:replace="view/common/nav :: navbar" style="width:100%;hight:25%"></div>
<div id="map" style="width: 100%;"></div> 
</body>  

</html>