目录
一、什么是API?API与SDK的关系?
1、什么是API
API(Application Programming interface,即应用程序接口)。
- API是一组封装良好的类,具有高内聚和低耦合的特点。
- API提供实现某一功能,获取某些数据所需的方法。
- 用户不用了解具体的实现过程
传统模式:功能自主编程实现,工作量大,效率低
基于API:功能主要依靠调用API实现
2、什么是SDK
SDK(Software Development Kit,软件开发工具包),一般都是某些软件工程师为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件的开发工具的集合。
SDK = 开发工具包 = 各类控件 + API + 文档 + 驱动 + …
API VS SDK:
API:只需要调用和传入参数即可。开发难度低、功能较简单、灵活性低。
SDK:需要编写大量代码。开发难度高,功能丰富、灵活性高。
二、百度API开发方法
1、申请百度帐号和ak
2、准备页面并设置样式
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0px;padding: 0px;}
#container{height:100%}
</style>
为页面设置样式,使地图充满整个页面
3、创建地图容器并完成初始化
(1)引入百度地图API文件
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密钥"></script>
(2)创建地图容器元素
<body >
<div id="container"></div>
</body>
地图需要一个HTML元素作为容器来展示到页面上
(3)完成初始化
window.onload=function(){
var map=new BMapGL.Map("container");//创建地图实例
var point=new BMapGL.Point(116.404,39.915);//设置中心点坐标
map.centerAndZoom(point,15);//初始化地图,设置中心点坐标和地图级别
}
使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点,116.404,39.915使经纬度。
BMapGL.Map.centerAndZoom()方法设置中心点坐标和地图缩放级别为15。
(4)配置
map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
map.setTilt(73); //设置地图的倾斜角度
map.setHeading(64.5); //设置地图的旋转角度
map.setMapType(BMAP_EARTH_MAP);//设置地图类型
- 标准地图:BMAP_NORMAL_MAP
- 地球模式:BMAP_EARTH_MAP
- 普通卫星地图:BMAP_SATELLITE_MAP
添加控件
//使用map.addControl()方法向地图添加控件
var scaleCtrl = new BMapGL.ScaleControl(); //添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); //添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(); //添加城市列表控件
map.addControl(cityCtrl);
var navi3DCtrl = new BMapGL.NavigationControl3D(); //添加3D控件
map.addControl(navi3DCtrl);
控件初始化
var opts1 = {
offset:new BMapGL.Size(30,10),
anchor:BMAP_ANCHOR_TOP_RIGHT
}
var opts2 = {
offset:new BMapGL.Size(35,50),
anchor:BMAP_ANCHOR_TOP_RIGHT
}
var opts3 = {
offset:new BMapGL.Size(48,140),
anchor:BMAP_ANCHOR_TOP_RIGHT
}
//使用map.addControl()方法向地图添加控件
var scaleCtrl = new BMapGL.ScaleControl(); //添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(opts3); //添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl(opts1); //添加城市列表控件
map.addControl(cityCtrl);
var navi3DCtrl = new BMapGL.NavigationControl3D(opts2); //添加3D控件
map.addControl(navi3DCtrl);
添加标记点,使用自定义图标
//创建自己的定位图标
var myIcon = new BMapGL.Icon("https://ts1.cn.mm.bing.net/th/id/R-C.f381b337b8704adee56fd8bbb11c7e2e?rik=P%2bxXNfMckCA8%2fg&riu=http%3a%2f%2fimg01.lianzhong.com%2fupload%2fnewbbs%2f2013%2f03%2f06%2f562%2f128564395004891.png&ehk=P3bcThlHnZ2OjeCcvPwkNFAVJahbGNHchAIGOtc7DOU%3d&risl=&pid=ImgRaw&r=0",
new BMapGL.Size(50,50));
//创建点标记,创建Marker标注,使用自定义图标
var point = new BMapGL.Point(116.404,39.925);
var marker = new BMapGL.Marker(point,{ icon:myIcon});
map.addOverlay(marker);
在标记点上添加信息框
//添加信息窗口
var opts = {
width:200,
height:100,
title:'故宫博物院'
};
var sContent = "北京故宫博物院北京故宫博物院建立于1925年,是在明朝、清朝两代皇宫及其收藏的基础"+"上建立起来的中国综合性博物馆,也是中国最大的古代文化艺术博物馆";
var infoWindow = new BMapGL.InfoWindow(sContent, opts);
map.openInfoWindow(infoWindow, point);
注意:InfoWindow的content支持html内容。
实现定位,并获取用户的地址解析以及解析结果
//实现定位
var geolocation = new BMapGL.Geolocation();
geolocation.getCurrentPosition(function (r){
if (this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMapGL.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置:'+r.point.lng +','+ r.point.lat);
var geoc = new BMapGL.Geocoder();//获取用户的地址解析
geoc.getLocation(r.point,function (rs){//解析结果
alert(rs.address);
})
}
else{
alert('failed' + this.getStatus());
}
});