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

<%@ 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.jsvar 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>

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

百度地图添加多个marker点位标注
百度地图添加多个marker点位标注新建一个TMap.js文件 export function TMap(key) {return new Promise(function (resolve, re ...
百度地图添加行政区域
找资料的时候看到很多大佬写过关于百度地图添加行政区域但是由于我的是离线地图直接用百度地图api获取不到,所以自己写了一遍记录一下. function getBoundary(){ var areas ...
百度地图添加工具条、比例尺控件
百度地图添加工具条.比例尺控件 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-T ...
android 百度地图闪退,Android使用百度地图出现闪退及定位时显示蓝屏问题的解决方法...
使用百度地图出现闪退一般情况下出现闪退是在AndroidManifest.xml文件中未在application标签中配置 android:name="com.baidu.lbsapi.A ...
纯css控制文字显示隐藏
纯css控制文字显示隐藏用到css 伪类 :checked :checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框). html <div class=" ...
echarts 控制图例显示隐藏以及自适应的方法
当屏幕大小发生变化,echarts没有进行自适应,我们可以使用它的resize()方法去解决. 当echarts的组件放在el-tabs里面的el-tab-pane切换时,echarts的自适应会跟不 ...
百度地图添加文本标注显示文字
一.业务场景通过百度地图API的 label 添加文本覆盖物,用于显示 marker点位的描述信息.并控制 label 的显示,鼠标移入点位的时候显示文字,不移入点位的时候不显示文字.去掉背景颜色框 ...
java百度地图添加标注_调取百度地图接口，实现取自己的实时位置，然后可以在百度地图上添加信息标注...
前几天接了一个小项目,就是有关百度地图的,和我的上一篇不一样,上一篇是复制人家的源代码是把东西写死了的,这次的比较有难度,要调取他的接口,用js来实现. 下面我先说一下主要实现的功能,和要实现的页面 ...
react 使用 leaflet 百度地图_【React】react项目中应用百度地图添加起始点绘制路线...
如图:项目中百度地图的应用添加起始点.终点并绘制路线在展示代码的时候首先展示一下后台返回给我的接口 { 其中position_list参数代表的是用户的行驶点, area参数代表的是服务区的坐标点, ...

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

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

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

最新文章

热门文章