主要参考的文章：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. sql查阅每一月的数据

    因为项目中需要做数据报表的功能,需要统计每个月的销售额.我找到下面的sql语句.后来经过自己的测试,发现第二句才是可以用的, //String sql="SELECT year(buydat ...

  2. Linq101-Conversion Operators

    using System; using System.Linq; namespace Linq101 { class Conversion { /// <summary> /// This ...

  3. asp.net使用dorpdownlist绑定无限级分类

          /// <summary>        /// 绑定父项分类        /// </summary> protected void DDLBindClass( ...

  4. ajax无刷新方式收集表单并提交表单

    ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...

  5. When Colon Scripting is comming(JavaScript语法扩充)

    当冒号脚本来临-- JavaScript语法扩充 连续好几夜的不能安眠,得出结论就是,未来语言未来的编译器应该是支持语法定制规则和语法扩展的,这样使得编程语言不断进化以更利于人类使用!of cours ...

  6. 手机端MVC-js框架-Gillie-中文版本

    译者声明: 1.代码库发布在http://pablovallejo.github.io/gillie/ 2.查看API介绍直接戳这里看整理. Gillie是一个轻型MVC框架,受Backbone的启发 ...

  7. adb server is out of date. killing... 解决方案

    忘了原文从哪来的了,过后查到补上链接 今天调试android的时候发现一个诡异的问题 C:\Users\xxxx>adb start-server   adb server is out of ...

  8. YesFInder - Web File Manager 网页文件管理系统

    开发原由: 原来想找一下实现可视化图片上传程序,先找了ckfinder,发现居然是收费的,而且用起来也不顺手,于是想能不能自己写一个.想到这就立即动手,花2天时间完成初步功能,然后再花了3天完善.目前 ...

  9. C# .net 如何根据访问者IP获取所在地区

    第一步:在根目录添加新项(类),新建一个类文件,把以下文件粘贴到该类文件下:   using System; using System.Collections.Generic; using Syste ...

  10. 利用Warensoft Stock Service编写高频交易软件

    利用Warensoft Stock Service编写高频交易软件 无论是哪种交易软件,对于程序员来讲,最麻烦的就是去实现各种算法.本文以SAR算法的实现过程为例,为大家说明如何使用Warensoft ...