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

最新推荐文章于 2024-06-14 00:50:11 发布

潜心专研的小张同学

最新推荐文章于 2024-06-14 00:50:11 发布

阅读量1.6k

点赞数 1

分类专栏：大前端文章标签： css 前端百度地图

本文链接：https://blog.csdn.net/this_zq/article/details/124696960

版权

大前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

如何使用前端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>