使用百度地图添加覆盖物和文本的方法

近期项目中使用百度地图做一些项目，涉及到在地图上添加圆形覆盖物并配有文本说明的情况，通过百度提供的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. 最终的效果如下图