样式优化之前的弹出框架
优化步骤：在三个步骤中创建一个基于高价值的弹出框架
步骤1：准确找到弹出框架的元素并隐藏原始的弹出框架样式
打开嵌入BAIDU地图中的页面，按CTRL+SHIFT+I打开浏览器开发人员工具，然后切换到元素面板。单击地图上的弹出框，该工具将自动找到相应的HTML结构。通常，弹出框的容器类别为.bmap_pop，并且内容区域为.bmap_center，其结构大致如下：
div class=’bmap_pop’div style=’box-sizing: content-box;’ div style=’box-sizing:content-box;’/div/div div class=’BMap_top’/div div class=’BMap_center’/div div class=’BMap_bottom’/div /div Step 2: Modify the information window creation logic
//BAIDU MAP API函数VAR MAP=NEW BMAP.MAP（’ALLMAP’）; var point=new Bmap.point（116.417854,39.921988）; var marker=new Bmap.marker（point）; //创建注释Map.addoverlay（Marker）; //Add annotation to the map map.centerAndZoom(point, 15);var opts={ width: 0, //Set width to 0 to use the actual width of the content height: 0, //Set height to 0 to automatically open offset: new window.BMap.Size(-15,30), enableAutoPan: true} var html=` div class=’Custom-Info-window__header’H3 class=’Custom-Info-window__title’Haidilao Wangfujing商店/H3按钮class=’Custom-Info-window__close’aria-label’aria-label=’CLOSS 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 19 17.59 13.41 12z’//svg /svg /button /div class=’Custom-Info-window__content’custom-info-window__content’地址：8楼，lotte yintai部门，No. 88 wang wang，北京/div`; var ifrowindow=new Bmap.infowindow（html，opts）; //创建一个信息窗口对象标记。AddeventListener（’click’，function（）{map.openinfowindow（infowindow，point）; //打开信息窗口}）;步骤3：覆盖默认样式并自定义CSS
.bmap_cpyctrl {display:无！ padding: 30px;背景： RGBA（4，29，66，0.85）;最小宽： 240px; width: auto; /* Max-Width: 300px; *//* Border-radius: 8px; *//* Box-Shadow: 0 0 20PX RGBA（0，162，255，0.3）; */font-family: system-ui，-apple-system，sans-serif; Border: 1PX实心RGBA（0，162，255，0.3）;}。custom-info-window__header {display: flex;合理的-CONTENT:太空之间； ALIGN-ITEMS:中心；保证底： 12px; padding-left: 16px;位置：相对；}。custom-info-window__header3:before {content:”;位置：绝对；左： 0; TOP: 50； Transform: Translatey（-50）; width: 8px;高度： 8px;背景：ffd700;边境- 拉迪乌斯： 50； box-shadow: 0 0 8px rgba（255，215，0，0.6）;}。custom-info-window__title {margin: 0;字体-SIZE: 20px; Font-Weight: 600; color: #fff;}。custom-info-window__close {width: 24px;高度： 24px;边界：无；背景：无； CURSOR:指针； Color: RGBA（255、255、255、0.6）; Transition3:颜色0.2s; display: flex; ALIGN-ITEMS:中心； JUSIFY-CONTENT:中心； padding: 0; Margin-Left: 8px;}。custom-info-window__close:Hover {color: #fff;}。custom-info-window__content {font-size: 16px;线高： 1.5; color: RGBA（255，255，255，0.85）;}/*调整箭头样式*/。casture-info-window3: {content:”;位置：绝对； bottom: -10px;左： 50; Transform: Translatex（-50）; width: 0;高度3: 0;边界左侧： 10px实心透明；边界： 10px实心透明；边界-TOP: 10PX实心RGBA（4、29、66、0.85）;过滤器： Drop-shadow（0 0 4PX RGBA（0，162，255，0.3））;}。bmap_pop div3:nth-child（1）{display:无！ Div:nth-Child（3）{display:无！ Div:nth-Child（6）{display:无！ {display:无！
样式优化的弹出框
技术原则：为什么可以通过三个步骤解决问题？
1。百度地图弹出框架的基本机制
Baidu Maps通过JavaScript API呈现子弹盒，默认样式由内置CSS文件控制。当我们调用新的bmap.infowindow（）创建一个弹出框时，其DOM结构将动态注入到页面中，并且类名称固定在BMAP_POP等，该名称为我们提供了通过CSS定位元素的切入点。
用户评论
金橙橙。-
看了这个指南，感觉百度地图的弹框设计确实需要优化，3步提升视觉体验，希望百度能尽快实施。
有15位网友表示赞同！
青山暮雪
优化UI确实重要，但关键还是要看功能是否强大。这个指南看起来不错，期待实际效果。
有14位网友表示赞同！
尘埃落定
3步提升界面视觉体验，听起来简单，但实际操作起来可能没那么容易。希望百度能给出更详细的步骤。
有10位网友表示赞同！
巴黎盛开的樱花
百度地图的弹框UI一直让人头疼，这个指南正好解决了我的痛点，感谢分享！
有12位网友表示赞同！
冷青裳
优化指南挺实用，不过我更关心的是，优化后的地图导航是否会更准确。
有16位网友表示赞同！
弃我者亡
百度地图的弹框UI一直很丑，这篇指南给出了很好的改进方向，期待看到新版本。
有11位网友表示赞同！
为爱放弃
3步提升视觉体验，感觉这个指南挺有价值的，我会试着在自己的项目中应用一下。
有18位网友表示赞同！
等量代换
百度地图的弹框UI太影响体验了，希望这篇指南能让百度重视这个问题。
有17位网友表示赞同！
执笔画眉
这个指南太实用了，我已经收藏了，以后做UI设计的时候会参考一下。
有17位网友表示赞同！
抓不住i
百度地图的弹框UI优化，我觉得这个指南挺有启发性的，希望百度能尽快改进。
有15位网友表示赞同！
孤单*无名指
3步提升界面视觉体验，听起来挺有道理的，但我更关心的是实用性。
有13位网友表示赞同！
淡抹丶悲伤
百度地图的弹框UI优化指南，对我来说是个及时的提醒，得赶紧看看。
有20位网友表示赞同！
优雅的叶子
这篇指南很详细，百度地图的弹框UI确实需要优化，希望百度能重视起来。
有13位网友表示赞同！
逃避
3步提升视觉体验，这个方法挺新颖的，期待百度地图的新版本。
有20位网友表示赞同！
七夏i
百度地图的弹框UI优化，这个指南给出了很多实用建议，谢谢分享。
有13位网友表示赞同！
发型不乱一切好办
这篇指南太实用了，我已经转发给我的UI设计师朋友了，希望他们能学到一些东西。
有18位网友表示赞同！
酒笙倾凉
百度地图的弹框UI优化，这个指南让我对UI设计有了新的认识，感谢分享。
有7位网友表示赞同！
╯念抹浅笑
3步提升界面视觉体验，这个方法不错，我打算在自己的产品中尝试一下。
有6位网友表示赞同！
爱情的过失
百度地图的弹框UI优化指南，对于UI设计师来说是个很好的参考资料，收藏了！
有12位网友表示赞同！