百度地图infoWindow圆角处理

最新推荐文章于 2023-09-11 16:02:47 发布

菜鸟怕怕

最新推荐文章于 2023-09-11 16:02:47 发布

阅读量5.7k

点赞数 5

分类专栏： PHP应用 javascript html5

本文链接：https://blog.csdn.net/u014062332/article/details/41083529

版权

PHP应用同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

html5

2 篇文章 0 订阅

订阅专栏

最近的一个项目用到了百度地图API里边的infoWindow弹框，但是百度自带的infoWindow弹框是个直角的矩形框，显示过于难看，于是有了将该框改为圆角的想法，但是API本身不支持样式的设置，所以我最终选择在弄清页面生成的弹框html元素后，自己来给他们定义css，以达到圆角效果，如下是我的css样式

/*地图标题*/
    .anchorBL{
        display:none;
    }
    .BMap_bubble_title{
        color:black;
        font-size:13px;
        font-weight: bold;
        text-align:left;
    }
    .BMap_pop div:nth-child(1){
        border-radius:7px 0 0 0;
    }
    .BMap_pop div:nth-child(3){
        border-radius:0 7px 0 0;background:#ABABAB;;
        /*background: #ABABAB;*/
        width:23px;
        width:0px;height;0px;
    }
    .BMap_pop div:nth-child(3) div{
        border-radius:7px;
    }
    .BMap_pop div:nth-child(5){
        border-radius:0 0 0 7px;
    }
    .BMap_pop div:nth-child(5) div{
        border-radius:7px;
    }
    .BMap_pop div:nth-child(7){
        border-radius:0 0 7px 0 ;
    }
    .BMap_pop div:nth-child div(7){
        border-radius:7px ;
    }