百度地图添加标识物，并能控制标识物显示/隐藏

最新推荐文章于 2023-11-07 22:57:12 发布

吟诗作对歌一曲

最新推荐文章于 2023-11-07 22:57:12 发布

阅读量1.9k

点赞数 5

分类专栏： JS开发文章标签：百度地图添加标识物百度地图控制标识物显示/隐藏百度地图调用后台方法显示标识点

本文链接：https://blog.csdn.net/qq_36216193/article/details/90375894

版权

JS开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

百度地图添加标识物，并能控制标识物显示/隐藏

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>GIS地图显示</title>
<script type="text/javascript" src="${ctxStatic}/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${ctxStatic}/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4&ak=XXX"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>

<style type="text/css">
    html {
    	height: 100%;
    }

    body {
    	height: 100%;
    	margin: 0px;
    	padding: 0px;
    }

    #container {
    	height: 100%;
    }
    
    .hide{
        position: absolute;
        z-index: 1;
        right: 5%;
        top: 30px;
        width: 80px;
    	height: 30px;
    	background-color: #ffffff;
    	border-radius: 4px;
    	border: solid 1px #1979ca;
    	font-family: MicrosoftYaHei;
    	font-size: 14px;
    	letter-spacing: 1px;
    	color: #1979ca;
    	cursor: pointer;
    	outline: none;
    }
    
</style>
</head>

<body>
	<input class="hide" type="button" value="隐藏" onclick="updateStatus(this)"/>
	<div id="container"></div>
	<script type='text/javascript'>
		//提示：下面的代码用jquery，所以如果有不能运行的情况请引用后尝试
		//百度地图api container对应前端div名称 前端要引用2.0版本的百度地图api
		//需引用api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js
		var map = new BMap.Map("container"); // 创建地图实例，禁止点击地图底图
		var cityName = '安徽省';
	    map.centerAndZoom(cityName, 8); // 初始化地图,设置中心点坐标和地图级别。
	    //map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
	    map.enableScrollWheelZoom(true);
	    map.addControl(new BMap.OverviewMapControl({
			anchor : BMAP_ANCHOR_BOTTOM_RIGHT,
			isOpen : 1
		}));   
		//添加缩略地图控件
	    map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE ,anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(50, 50)}));

	    var markerArr = new Array();
		
		//ajax后台查询基地信息集合
		$.ajax({
			type : "POST", //请求方式
			url : "${ctx}/fgw/fgwGIS/getList", //请求路径：页面/方法名字
			dataType : "json",
			contentType : "application/json; charset=utf-8",
			success : function(msg) { //成功
				for (var i = 0; i < msg.length; i++) {
					var id = msg[i].id;
					var name = msg[i].name;
					var lonlat = msg[i].longitude + "," + msg[i].latitude;
					var json_obj = {
						id : id,
						title : name,
						point : lonlat
					};
					markerArr.push(json_obj);
					biaoshi1();
				}   
			},
			error : function(obj, msg, e) { //异常
				alert("OH,NO!");
			}
		});

	    //隐藏标识物
	    function biaoshi1(){
	    	map.clearOverlays();//清除图层覆盖物
	    	var bdary = new BMap.Boundary();
		    bdary.get(cityName, function (rs) { //获取行政区域       
		        map.clearOverlays(); //清除地图覆盖物  
		        //for循环都删除掉了，只剩下这个
		        //网上查了下，东西经南北纬的范围
		        var EN_JW = "180, 90;";         //东北角
		        var NW_JW = "-180,  90;";       //西北角
		        var WS_JW = "-180, -90;";       //西南角
		        var SE_JW = "180, -90;";        //东南角
		        //4.添加环形遮罩层
		        var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "rgb(246,246,246)", fillOpacity:1, strokeOpacity: 0.5 }); //建立多边形覆盖物
		        map.addOverlay(ply1);  
		        //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
		        var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#00f",fillColor: "" });
		        map.addOverlay(ply); 
		        for (var i = 0; i < markerArr.length; i++) {
					var p0 = markerArr[i].point.split(",")[0];
					var p1 = markerArr[i].point.split(",")[1];
					var maker = addMarker(new window.BMap.Point(p0, p1));
					addInfoWindow(maker, markerArr[i]);
					(function() {
						var thePoint = markerArr[i];
						maker.addEventListener("click", function() {
							onMakerClick(this, thePoint);
						});
					})(); 
				}    
		     });
	    }
	    
	    //显示标识物
	    function biaoshi2(){
	    	map.clearOverlays();//清除图层覆盖物
	    	var bdary = new BMap.Boundary();
		    bdary.get(cityName, function (rs) {//获取行政区域       
		        map.clearOverlays(); //清除地图覆盖物  
		        //for循环都删除掉了，只剩下这个
		        //网上查了下，东西经南北纬的范围
		        var EN_JW = "180, 90;";         //东北角
		        var NW_JW = "-180,  90;";       //西北角
		        var WS_JW = "-180, -90;";       //西南角
		        var SE_JW = "180, -90;";        //东南角
		        //4.添加环形遮罩层
		        var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: "none", fillColor: "rgb(246,246,246)", fillOpacity:1, strokeOpacity: 0.5 }); //建立多边形覆盖物 
		        map.addOverlay(ply1);  
		        //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
		        var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#00f",fillColor: "" });
		        map.addOverlay(ply); 
		        
		        for (var i = 0; i < markerArr.length; i++) {
					var p0 = markerArr[i].point.split(",")[0];
					var p1 = markerArr[i].point.split(",")[1];
					var makers = addMarker(new window.BMap.Point(p0, p1));
					addInfoWindows(makers, markerArr[i]);
					(function() { 
						var thePoint = markerArr[i];
						makers.addEventListener("click",function() {onMakerClick(this, thePoint);});
					 })();
				}  
		     });
	    }
	    
	 	// 添加标注
		function addMarker(point) {
			var myIcon = new BMap.Icon(
					"${ctxStatic}/images/area.png", new BMap.Size(23, 25), {
						offset : new BMap.Size(10, 25),
					});
			var marker = new BMap.Marker(point, {
				icon : myIcon
			});
			map.addOverlay(marker);
			return marker;
		}

		// 添加信息窗口
		function addInfoWindow(marker, poi) {
			var label = new window.BMap.Label(poi.title, {
				offset : new window.BMap.Size(20, -10)
			});
			marker.setLabel(label);
			var clo = "";
			if ("我的位置" == poi.title) {
				clo = "#FF5782";
			} else {
				clo = "#E6FED";
			}
			var info = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;color:"+clo+";’>" + poi.title + "</p>"); // 创建信息窗口对象
			marker.addEventListener("mouseover", openInfoWinFun);
			var openInfoWinFun = function() {
				this.openInfoWindow(info);
			};
		}

		// 添加信息窗口
		function addInfoWindows(markers, poi) {
			var clo = "";
			if ("我的位置" == poi.title) {
				clo = "#FF5782";
			} else {
				clo = "#E6FED";
			}
			var info = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;color:"+clo+";’>" + poi.title + "</p>"); // 创建信息窗口对象
			markers.addEventListener("mouseover", openInfoWinFun);
			var openInfoWinFun = function() {
				this.openInfoWindow(info);
			};
		}

		//弹出框样式
		var opts = {
			width : 250,
			heigth : 80,
			title : "基地信息",
			enableMessage : true
		};

		//标注点点击事件
		function onMakerClick(thisMakers, thePoint) {
			var thisMakers = thisMakers;
			var pid = thePoint.id;
			var pname = thePoint.title;
			$.ajax({
						type : "POST", //请求方式
						url : "${ctx}/fgw/fgwGIS/getIndex", //请求路径：页面/方法名字
						data : {
							"id" : thePoint.id,
							"name" : thePoint.title
						},
						dataType : "json",
						success : function(msg) { //成功
							var name = msg.name;
							var city = msg.cityName;
							var area = msg.areaName;
							var address = msg.adress;
							if (city == "" || city == null) {
								city = "--";
							}
							if (area == "" || area == null) {
								area = "--";
							}
							if (address == "" || address == null) {
								address = "";
							}
							var monery = msg.monery;
							var subsidyMoney = msg.subsidyMoney;
							if (subsidyMoney == "" || subsidyMoney == null) {
								subsidyMoney = "--";
							}
							var schedule = msg.schedule;
							if (schedule == "" || schedule == null) {
								schedule = "--";
							}
							var benefit = msg.benefit;
							if (benefit == "" || benefit == null) {
								benefit = "--";
							}
							var state;
							if (msg.state == "" || msg.state == null) {
								state = "--";
							}else if (msg.state == '1') {
								state = "未实施";
							} else if (msg.state == '2') {
								state = "实施中";
							} else if (msg.state == '3') {
								state = "已结束";
							} else if (msg.state == '4') {
								state = "已验收";
							}
							var text = "项目名称：" + name
									+ "<br/>建设地点：" + city + area
									+ address + "<br/>总投资："
									+ monery + "(万元)<br/>补助资金："
									+ subsidyMoney
									+ "(万元)<br/>建设进度：" + schedule
									+ "<br/>建设效益：" + benefit
									+ "<br/>状态：" + state;
							console.log(text);

							var point = new BMap.Point(thisMakers.getPosition().lng, thisMakers.getPosition().lat);
							var infoWindow = new BMap.InfoWindow(text, opts);
							map.openInfoWindow(infoWindow, point);
						},
						error : function(obj, msg, e) { //异常
							alert("OH,NO!");
						}
					});
		}
		
		function updateStatus(status){
			var sta = $(status).val()
			if(sta == "显示"){
				$(status).val("隐藏");
				biaoshi1();
			}else{
				$(status).val("显示");
				biaoshi2();
			}
		}
	</script>
</body>
</html>

吟诗作对歌一曲

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
百度地图添加标识物，并能控制标识物显示/隐藏

百度地图添加标识物，并能控制标识物显示/隐藏<%@ page contentType="text/html;charset=UTF-8"%><%@ include file="/WEB-INF/views/include/taglib.jsp"%><html><head><title>GIS地图显示</title>...
复制链接

扫一扫