- body,
- html {
- width: 100 % ;
- height: 100 % ;
- margin: 0;
- font - family: "微软雅黑";
- }#allmap {
- width: 100 % ;
- height: 80 % ;
- }
- p {
- margin - left: 5px;
- font - size: 14px;
- }
- JS实现显示和隐藏div(以百度地图为例)
- 点击地图右上角的图标,实现显示或隐藏div内容
- // 百度地图初始化
- 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 = "";
- 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 = "" + "" + routeName + "" + "" + "执行人员:" + empName + "" + "执行时间:
- " + taskTimeStart + "" + "";
- newDiv.innerHTML = HTMLstr;
- document.getElementById("allmap").appendChild(newDiv);
- }
来源: