您的位置:首页 > Web前端 > HTML

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

2016-12-21 15:53 218 查看
在公司项目中,用到了基于百度地图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); //为标注添加一个标签

效果图如下:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  html api 百度 标签
相关文章推荐