百度地圖infoWindow圓角處理


最近的一個項目用到了百度地圖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 ;
    }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM