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