百度API接口开发,创建标注和Label标签。

来源:互联网 发布:数据库系统概念第六版 编辑:程序博客网 时间:2024/06/05 20:34

在公司项目中,用到了基于百度地图API的开发,下面简单介绍一下:

第一步在页面中引入js文件,src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"。

第二步:创建实例,进行初始化,如下:

   var map = new BMap.Map("container");          // 创建地图实例  
map.centerAndZoom("上海",12);     // 初始化地图,用城市名设置地图中心点
var point = new BMap.Point(121.48, 31.22);  // 创建点坐标  
map.centerAndZoom(point, 12);                // 初始化地图,设置中心点坐标和地图级别

第三步:创建标注,如下:

var marker = new BMap.Marker(point); // 创建标注  
map.addOverlay(marker);

第四步:创建Label,如下:

var label = new BMap.Label("这是一个标签!", {
offset: new BMap.Size(15, -25)
});

第五步:为Label设置样式,代码如下:

label.setStyle({
width: "120px",
color: '#fff',
background: '#ff8355',
border: '1px solid "#ff8355"',
borderRadius: "5px",
textAlign: "center",
height: "26px",
lineHeight: "26px"
});

第六步:为标注添加Label,代码如下:

marker.setLabel(label); //为标注添加一个标签

效果图如下:



0 0