如何使用前端css代码去掉百度地图左下角的图标

写在前面：

本文为百度地图开发系列文章之一，

前期回顾：
1. webGIS，基于百度地图的HelloWord实现
2. 如何使用前端css代码去掉百度地图左下角的图标（本篇就是）
以上对应视频教程（博客与视频前面的序号是一一对应的）：
1. 百度地图开发从零开始00初始化地图创建helloWorld
2. 百度地图开发从零开始01去地图左下角图标
个人前端博客网站：zhangqiang.hk.cn
欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！

本篇仅供学习参考使用。

1 效果图

1.1 原来的

1.2 现在的

2 思路

这里主要是用于更改地图自带的css样式实现。那么如何更改就是一个重点了，首先我们要运行程序，打开运行状态下的网页，然后按f12呼出控制台，找到对应的元素（div等），将其隐藏掉即可。值得注意的是，我们需要加上!important，因为这样可以使权重变为最高，就可以把其隐藏掉了。

3 源码

<!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,#allmap {width: 100%;height: 100vh;margin-bottom: -15px;overflow: hidden;margin: 0;font-family: "微软雅黑";}
#allmap .anchorBL img {display: none;}
#allmap .BMap_cpyCtrl span {display: none !important;;}</style><script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GXn1gkhgbbWet55NCyKzjB7Hqfdh3gos"></script><title>地图展示</title>
</head>

<body><div id="allmap"></div>
</body>

</html>
<script type="text/javascript">// GL版命名空间为BMapGL// 按住鼠标右键，修改倾斜角和角度var map = new BMapGL.Map("allmap"); // 创建Map实例map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
</script>

4 源码仓库地址

下面这个仓库为本篇知识点的源码地址，同时也是本系列的仓库地址，后面的源码更新都会在这个仓库里进行。

front-end-study-GoGoGo/webGIS-basic-BMapGL: 基于百度地图JavaScript GL实现的GIS的一些基础例子 (github.com)

如何使用前端css代码去掉百度地图左下角的图标相关推荐

Android去掉百度地图sdk中卫星地图里的白色道路
最近开发一个APP,需要去掉百度地图sdk中的卫星地图里面的白色道路,没有去掉之前: 如上图各种白色道路割裂了卫星地图进行图层绘制的时候不太美观,于是就百度了如何去掉道路,并且也提交了工单询问百度地图 ...
高德地图——浏览器定位+点击获取经纬度+去除高德百度地图左下角logo
高德地图--浏览器定位+点击获取经纬度+去除高德百度地图左下角logo 1.代码 <!doctype html> <html> <head><meta cha ...
百度地图动态修改图标
百度地图API真的是无力吐槽. 最近做一个页面推送功能,需要实时修改百度地图覆盖物的图标,研究了一下午,总算出来了.其实也不难,利用提供的setIcon()方法可以对图标进行动态更新. //覆盖物扫描 ...
css代码实现各式各样的icon小图标
下载地址 css代码实现各式各样的icon小图标样式 dd:
百度地图开发自定义图标无法显示的问题
直接上解决方案引入图标需要使用require关键字,不能只写资源路径: 你的图标的大小必须与百度地图设置的图标size一致,比如下图在icon font中下载了一个图标(200 * 200),在引入 ...
百度地图解决自定义图标显示问题
百度地图解决自定义图标太大不显示问题这几天碰到这个需求, 需要在百度地图上显示头像,因为图片太大一直没有显示,百度了几天,解决都长一样,心累. 提供以下几种解决思路: 检查图片路径是否错误图标大小 ...
同步和异步概念（由DZW前端框架引发的百度地图api无法加载问题总结）
首先概念: 在计算机领域,同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去:异步是指进程不需要一直等下去,而是继续 ...
vue使用百度地图（BMap）去掉百度地图的标志。
在使用百度地图的文件,加上如下CSS标志即可: .BMap_cpyCtrl {display: none; } .anchorBL {display: none; } 如果在使用的文件加上面的代码不生 ...
前端学习（2466）：在前端页面中引入百度地图
1.配置你需要的地图效果百度地图生成器可选配置:位置.宽高.缩放.标注样式 2.导出导入地图代码点击获取代码,将代码引入到你的html.js.vue等文件中 ps:标注不显示的解决方法:将图标链接换 ...
气象地图gis php代码,基于百度地图API实现自动气象站点信息显示
本栏目责任编辑:代影数据库与信息管理 ComputerKnowledgeand Technology 电脑知识与技术第9卷第27期 (2013年09月) 基于百度地图API实现自动气象站点信息显示 ...

如何使用前端css代码去掉百度地图左下角的图标

如何使用前端css代码去掉百度地图左下角的图标

1 效果图

1.1 原来的

1.2 现在的

2 思路

3 源码

4 源码仓库地址

如何使用前端css代码去掉百度地图左下角的图标相关推荐

最新文章

热门文章