主要参考的文章:https://my.oschina.net/xsh1208/blog/215811,https://zhidao.baidu.com/question/568774688.html

隐藏和显示div的方式有两种:

方式1:隐藏后仍占有页面空间,显示空白
div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白.
style="visibility: none;"
document.getElementById("typediv1").style.visibility="hidden";//隐藏
document.getElementById("typediv1").style.visibility="visible";//显示

方式2:隐藏后释放占用的页面空间
通过设置display属性可以使div隐藏后释放占用的页面空间.
style="display: none;"
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示

注意:
使用第二方式更人性化,但是,用div.style.display="none"隐藏会引起,div里面的东西休眠,里面的事件就不响应了。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:80%;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script> <!-- 引入jQuery -->
<title>JS 实现显示和隐藏div(以百度地图为例)</title>
</head>
<body>
<div id="allmap"></div>
<p>点击地图右上角的图标,实现显示或隐藏div内容</p>
</body>
</html>
<script type="text/javascript">
// 百度地图初始化
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.3964,39.9093), 15);
map.enableScrollWheelZoom(); //添加自定义的覆盖物
function ZoomControl_Center(){
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(20, 10);
}
ZoomControl_Center.prototype = new BMap.Control();
ZoomControl_Center.prototype.initialize = function(map){
var div = document.createElement("div");
div.innerHTML = "<img src='images/profle.png' width='32px' height='32px'>";
div.style.cursor = "pointer"; div.onclick = function(){ //添加响应事件
var x = document.getElementById("userInfoDiv");
//方式1,
/* if(x.style.display=="none"){
x.style.display="block"; //显示
}else{
x.style.display="none"; //隐藏
} */ //方式2,原生简写(三元运算)
//x.style.visibility=x.style.visibility=="hidden"?"visible":"hidden"; //方式3,jquery
if($("#userInfoDiv").css("display")=='none'){//如果是隐藏的
$("#userInfoDiv").css("display","block");//display属性设置为block(显示)
}else{
$("#userInfoDiv").css("display","none");
}
}
map.getContainer().appendChild(div);
return div;
};
map.addControl(new ZoomControl_Center()); openUserInfoDiv(); //覆盖层显示内容
function openUserInfoDiv(){
var newDiv = document.createElement("div");
newDiv.id = "userInfoDiv";
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999"; newDiv.style.width ="150px";
newDiv.style.top = "50px";
newDiv.style.right = "0px"; newDiv.style.background = "#ffffff";
newDiv.style.opacity = "0.9";
newDiv.style.padding = "5px";
newDiv.style.display="none"; //隐藏
//newDiv.style.visibility="hidden"; //隐藏 var routeName = "测试路线";
var empName = "张三";
var taskTimeStart = "2016-12-19 19:00:00"; var HTMLstr = "<div style='background:#1868bd;color:#fff; '>"
+"<span style='margin:10px;padding:0.2em 0;line-height:1.5;font-size:15px'><b>"+routeName+"</b></span></div>"
+"<ul style='margin:0px;padding:15px;color:#1868bd;line-height:1.2;'>"
+"<li><font size='1.5'><b>执行人员:"+empName+"</b></font></li>"
+"<li><font size='1.5'><b>执行时间:</b></font></br><font size='1' color='#000'>"+taskTimeStart+"</font></li>"
+"</ul>";
newDiv.innerHTML = HTMLstr; document.getElementById("allmap").appendChild(newDiv);
}
</script>

简单介绍:

1.百度地图初始化,注意添加百度地图的秘钥key;

2.添加自定义的覆盖物,用于点击事件;

3.添加覆盖层,用于显示内容;

4.添加覆盖物的响应事件

JS 实现显示和隐藏div(以百度地图为例)的更多相关文章

  1. js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  2. JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

  3. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  4. jquery显示、隐藏div的方法

    $("#top_notice").css("display", "block");//第1种方法 //$("#top_notice ...

  5. 问题:关于坛友的一个定时重复显示和隐藏div的实现

    需求:打开页面只看到DIV2,等完秒数之后在显示DIV3.手动关闭DIV3后在重新数秒 我设置的间隔时间是3秒,代码如下: html+css: 1: <!DOCTYPE HTML> htm ...

  6. 第十二篇 JavaScript(简称JS) 实现显示与隐藏

    JavaScript   JavaScript简称JS.JS是脚本语言,它是一种轻量级的编程语言,是可以插入HTML页面的编程代码,几乎所有现代浏览器都是支持的. 理论老师不行,我就抄袭手册上的一些关 ...

  7. jquery点击区域显示或隐藏DIV,点击非该DIV的地方隐藏该DIV

    <div class="Content_top"> <div class="Reserve"> <h3><span c ...

  8. jquery点击按钮显示和隐藏DIv

    function changeDisplay() { if ($("#btnShow").attr("value")== "添加附件") { ...

  9. 显示或隐藏div

    代码来源于博客,如有侵权,请联系我! ASP.NET中TextBox控件设置ReadOnly="true"H或Enabled=false后台取不到值 当TextBox设置了Read ...

随机推荐

  1. codevs2622数字序列( 连续子序列最大和O(n)算法)

    /* 算法描述:维护一个s[p]表示累加和 并且更新最大值ans 如果s[p]<0 则从p+1重新累加 证明:设某个区间的起点和终点分别为s t 分两种情况 1.t<p:设s2表示1到s的 ...

  2. angular-ui-tree

    angular-ui-tree的github项目地址:https://github.com/angular-ui-tree/angular-ui-tree DEMO目录结构如下: bootstrap. ...

  3. HTML5音乐播放器

    //HTML5部分 <a href="javascript:void(0);" onclick="getCurrentTime('firefox');"& ...

  4. Java POI 导出excel表

    1.首先下载poi-3.6-20091214.jar,下载地址如下: http://download.csdn.net/detail/evangel_z/3895051 2.Student.java ...

  5. Mysql 中is null 和 =null 的区别

    在mysql中,筛选非空的时候经常会用到is not null和!=null,这两种方法单从字面上来看感觉是差不多的,其实如 果去运行一下试试的话差别会很大! 为什么会出现这种情况呢? null 表示 ...

  6. MSChart使用之动态生成多个多行ChartArea

    前台代码: <asp:Chart ID=" > <Titles> <asp:Title Name="Title1" runat=" ...

  7. ASP.NET菜鸟之路之Seesion小例子

    背景 我是一个ASP.NET菜鸟,暂时开始学习ASP.NET,在此记录下我个人敲的代码,没有多少参考价值,请看到的盆友们为我点个赞支持我一下,多谢了. Session介绍 Session保存特定用户相 ...

  8. Jquery学习笔记1-jquery总体代码框架

    第一次在博客中记录自己的笔记,希望能坚持下去吧,加油! 今天学习的是Jquery的源代码,官网上下载,然后使用DW(dream waver)编辑器打开Js(下载的是未压缩版),版本是2.0.3.第一次 ...

  9. windows下apache配置ssl(https)服务器

    SSl是为Http传输提供安全的协议,通过证书认证来确保客户端和网站服务器之间的数据是安全, 可以通过apache自带的openssl进行配置: 步骤如下: 1.安装有openssl模板的apache ...

  10. indexof()方法

    w3c手册定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置 stringObject.indexOf(searchvalue,fromindex) searchva ...