百度地图样式冲突问题

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

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

1. 首先获取一个ak，具体步骤可以百度
2. 页面引入CSS文件

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

          

3. 页面引入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>

    

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

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

    

5. 引入对应的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);
   

    

6. 定义 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;
}

再次运行，看效果：

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

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

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