百度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); //为标注添加一个标签
效果图如下:
第一步:在页面中引入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); //为标注添加一个标签
效果图如下:
相关文章推荐
- 百度地图API多个点聚合时,标注添加的标签label地图刷新就丢失的问题解决
- java微信开发API解析(三)-高级功能的前奏----获取以及保存接口调用凭证 标签: 微信java办微信开发微信文档解析 2016-04-06 20:50 1101人阅读 评论(0) 收藏 举报
- js调用百度接口api接口添加标注
- [原创]java WEB学习笔记40:简单标签概述(背景,使用一个标签,标签库的API,SimpleTag接口,创建一个自定义的标签的步骤 和简单实践)
- API接口开发v2.1(百度知道)终于明白了
- ArcGIS API for Silverlight之Web Mapping开发:根据图层属性查询、定位、高亮显示并显示标注(2)
- 自动化(Automation)基础概念:二次开发接口(API)与插件(Addin)
- 自动化(Automation)基础概念:二次开发接口(API)与插件(Addin)
- 关于用.Net平台开发SPMS_API开发接口里的PChar说明——转载
- 创意:关于QQ即时通讯聊天,群聊天窗口插件接口API开发
- arcgis api for flex 开发入门(二)map 的创建
- 关于用.Net平台开发SPMS_API开发接口(青牛软件 SPInterface.dll) 里的PChar说明
- 支付宝API接口开发相关文档以及实例
- 标签(GTKLabel) -- GTK开发资料
- FlashPaper API接口开发
- 淘宝API开发(一)简单介绍淘宝API功能接口作用
- 自动化(Automation)基础概念:二次开发接口(API)与插件(Addin)
- JBuilder2005创建开发文档之标签介绍
- OpenJWeb快速开发平台自动创建基于事务的业务逻辑接口和实现类
- QQ终于开发登录接口api