百度地图样式冲突问题

前段时间做项目需要用到地图显示，于是我这边就选择了百度地图（考虑到之前用过百度地图）

页面使用百度地图步骤还是比较简单的，如下：

首先获取一个ak，具体步骤可以百度

页面引入CSS文件

<link href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" rel="stylesheet">

页面引入JS文件

<script src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script><script src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>

定义 div （百度地图显示的div）

<div class="col-lg-12 locationmap" id="locationmap"></div>

引入对应的JS代码块

!(function($) {//百度地图API功能var map = new BMap.Map('locationmap');var poi = new BMap.Point(111.983913, 32.016689);map.centerAndZoom(poi, 16);map.enableScrollWheelZoom();var content = '<div>' +'地址：襄阳市襄城区卧龙镇朝阳村一组' +'</div>';//创建检索信息窗口对象var searchInfoWindow = null;searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {title: "卧龙月季花海", //标题width: 360, //宽度height: 30, //高度panel: "panel", //检索结果面板enableAutoPan: true, //自动平移searchTypes: [BMAPLIB_TAB_TO_HERE, //到这里去BMAPLIB_TAB_FROM_HERE, //从这里出发BMAPLIB_TAB_SEARCH //周边检索]})var marker = new BMap.Marker(poi); //创建marker对象marker.enableDragging(); //marker可拖拽marker.addEventListener("click", function(e) {searchInfoWindow.open(marker);})map.addOverlay(marker); //在地图中添加marker})(jQuery);

定义 div 样式（百度地图显示的div样式）

/*--------------------------------------------------------------
# 添加百度地图样式
--------------------------------------------------------------*/
.locationmap {width: 100%;height: 500px;background: #fff;/* box-sizing: unset; *//* margin: -20px -20px 20px -20px; */overflow: hidden;
}

这里需要说明一点的是，实现不同百度地图，引入的css、js和使用略有差异，可以参考百度地图上面对应的案例。

运行起来看效果如下：

什么情况，样式竟然有问题，一步步小心翼翼的操作，怎么会有问题。反复检查N次后发现竟然是和页面引入的bootstrap.min.css样式冲突，冲突的就是box上面。

于是追加CSS内容如下：

/*--------------------------------------------------------------
# 解决百度地图和bootstrap样式冲突问题
--------------------------------------------------------------*/
.locationmap *::before, .locationmap *::after {box-sizing: content-box;
}
.locationmap *::before, .locationmap *::after {box-sizing: content-box;
}
.locationmap * {box-sizing: content-box;
}

再次运行，看效果：

完美解决，虽然文章就短短几分钟，但是这个问题却让我搞了一个多小时。

以上代码仅供参考，如有不当之处，欢迎指出！！！

更多干货，欢迎大家关注和联系我。期待和大家一起更好的交流、探讨技术！！！

百度地图样式冲突问题相关推荐

百度地图api自定义修改地图背景样式
引入百度地图api就不用多说了吧! https://developer.baidu.com/map/custom/ //这个网址可以去模拟修改百度地图样式当修改到心仪的样式时,点击生成JSON,就会 ...
Android关于友盟推送与百度地图、阿里支付的冲突解决问题
1.首先确认我们的百度地图还有友盟推送以及阿里支付独自单个项目运行是正确的可运行的. 在这里我只是简单的提几点: 1.1 百度地图注意点: a. SHA1值的获取,现在大家开发环 ...
解决在EasyUI中使用百度地图出现不居中和坐标图标显示异常的问题(红色代码部分)
问题:1.加载指定经纬度的坐标点怎么都不居中显示,总是显示在左上角,需要在地图加载完后拖动才看到指定的坐标点:2.显示的坐标点图片没有正常显示,后面使用了自定义坐标图片(如图): 解决后: 参考: 1 ...
可视化篇：Echarts2.0引入百度地图
写在最前 Echarts作为百度团队下一个可视化的js库,自2.0更新至3.0以来,其带来的视觉冲击更加强悍,数据可视更加精美,图形交互更加贴合用户. 由于echarts2在百度地图的实例上没有作过多 ...
可视化篇：Echarts2.0引入百度地图(转载)
原链接:https://blog.csdn.net/yc_1993/article/details/51367575?spm=1001.2014.3001.5501 写在最前 Echarts作为百度团 ...
vue -web引入百度地图
本篇文章是笔者记录:从零到实现的全部过程先看效果图,是否是你想要的效果,两张不同缩放得到的效果图,目录有最终的效果图要想实现如图所示,必须满足以下几个条件: 是否已有百度地图的api的ak密钥: ...
百度地图label样式修正
现象:百度地图 label 宽度为0,文字在标签边框外. 原因:样式冲突,在css中添加下列代码即可: .BMapLabel{ max-width:none; } 转载于:https://www.cn ...
【百度地图API1.1】修改文本标注的样式
原文:[百度地图API1.1]修改文本标注的样式百度地图API1.0中文本标注的样式写法为: label.getDom().style.borderColor = "#808080&quo ...
【百度地图API】如何调整结果面板的样式？如何获取指定页码的结果？
原文:[百度地图API]如何调整结果面板的样式?如何获取指定页码的结果? 摘要: 1.你是否想自定义查询后,结果面板的显示样式? 2.数据接口每次只返回10条结果,如何取到单独每一页的结果? ---- ...

百度地图样式冲突问题

前段时间做项目需要用到地图显示，于是我这边就选择了百度地图（考虑到之前用过百度地图）

百度地图样式冲突问题相关推荐

最新文章

热门文章