近期專案中使用百度地圖做一些專案，涉及到在地圖上新增圓形覆蓋物並配有文字說明的情況，通過百度提供的API例子發現沒有現成的效果，然後瞭解百度API將專案使用到的效果實現出來，實現的過來如下：

1. 在百度地圖的“新增/刪除覆蓋物”例子上改造的，因為我們用到了圓形效果

    http://developer.baidu.com/map/jsdemo.htm#c1_1

2. 將無關的圖形去掉保留圓形的設定程式碼，然後開啟“新增文字標籤”例子頁面

     http://developer.baidu.com/map/jsdemo.htm#c1_14

3.  將新增文字的程式碼同時作為覆蓋物新增到圓形相同的點上，合併後的程式碼如下

     // 百度地圖API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var circle = new BMap.Circle(point,
                                 500,{
                                 strokeColor:"#FF9800", //原型邊框顏色
                                 strokeWeight:2, 
                                 strokeOpacity:0.5,
                                 fillColor:'#FF9800'}); //建立圓

  var opts = {
 position : point,    // 指定文字標註所在的地理位置
 offset   : new BMap.Size(-50, -10)    //設定文字偏移量
}
var label = new BMap.Label("天安門 1200萬", opts);  // 建立文字標註物件
label.setStyle({
color : "#FFF",
             backgroundColor:'transparent',//文字背景色
             borderColor:'transparent',//文字框邊框色
fontSize : "16px",
height : "20px",
lineHeight : "20px",
fontFamily:"微軟雅黑"
});
 
//新增覆蓋物
function add_overlay(){
map.addOverlay(circle);            //增加圓
        map.addOverlay(label);            //增加圓
}
//清除覆蓋物
function remove_overlay(){
map.clearOverlays();         
}

4. 最終的效果如下圖