目录
百度地图_账号和获取密钥
百度地图_初始化
百度地图_变更地图类型
百度地图_添加控件
百度地图_改变控件位置
百度地图_添加覆盖物
百度地图_自定义标注图标
百度地图_添加文本标注
百度地图_正/逆地址解析
百度地图_信息窗口
百度地图_规划驾车路线
百度地图_规划公交路线
百度地图_规划步行路线
百度地图_定位
百度地图_自定义视角动画
百度地图_账号和获取密钥
百度地图提供了一套由JavaScript语言编写的应用程序接口，该套接 口目前最新版本为 JavaScript API GL v1.0 。
使用这些接口我们就可以在页面上构建功能丰富、交互性强的地图应用。
接口使用方法：
1 注册百度账号 https://lbsyun.baidu.com/
2 申请成为百度开发者
3、获取服务密钥
4、使用服务相关功能
1.下列描述错误的是： 使用百度地图的接口不需要密钥
百度地图_初始化
1、引用百度地图API文件
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你的密钥"></script>2、创建地图容器元素
<div id="container"></div>3、创建地图实例，其参数可以是元素id也可以是元素对象
var map = new BMapGL.Map("container");4、设置中心点坐标
var point = new BMapGL.Point(116.404,39.915); //第一个参数为经度，第二个参数为纬度5、地图初始化，同时设置地图展示级别，地图展示级别范围（1- 21）
map.centerAndZoom(point, 15); //第一个参数为中心点坐标，第二个参数为地图级别6、开启鼠标滚轮缩放
map.enableScrollWheelZoom(true); //开启鼠标 滚轮缩放
1.使用哪个方法生成百度地图实例： new BMapGL.Map()
百度地图_变更地图类型
var map = new BMapGL.Map('container')//生成地图实例
var centerPoint=new BMapGL.Point(116.404, 39.915)//设置地图的中心点
map.centerAndZoom(centerPoint,1)//初始化地图
map.enableScrollWheelZoom(true)//开启鼠标滚轮缩放
map.setMapType(BMAP_EARTH_MAP)//设置地图类型为地球1.使用哪个方法变更地图类型：map.setMapType
百度地图_添加控件
控件是负责与地图交互的UI元素，百度地图API支持 比例尺、缩放、定位、城市选择列表、版权 。
1、完成地图初始化
2、添加控件， map.addControl(控件实例)
2.1、添加比例尺控件
var scaleCtrl = new BMapGL.ScaleControl(); // 实例化比例尺控件 map.addControl(scaleCtrl);//添加比例尺控件2.2、添加缩放控件
var zoomCtrl = new BMapGL.ZoomControl(); //实例化控件 map.addControl(zoomCtrl);// 添加缩放控件2.3、添加城市列表控件
var cityCtrl = new BMapGL.CityListControl(); //实例化控件 map.addControl(cityCtrl);// 添加城市列表控件2.4、添加定位控件
var locationCtrl=new BMapGL.LocationControl()//实例化控件 map.addControl(locationCtrl)//添加定位控件
1.使用哪个方法可以添加缩放控件：map.addControl(new BMapGL.ZoomControl())
百度地图_改变控件位置
1、控制控件位置
初始化控件时，可提供一个可选参数，是一个json对象，里面有 个属性 anchor 表示控件的停靠位置，即控件停靠在地图的哪个 角。当地图尺寸发生变化时，控件会根据停靠位置的不同来调整 自己的位置。
var scaleCtrl= new BMapGL.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT}) //实例化控件的时候可以传递一个可选参数，为一个 json map.addControl(scaleCtrl)2、控件位置偏移
除了指定停靠位置外，还可以通过偏移量来指示控件距离地图边界有多少像素。
通过 offset 设置。
var scaleCtrl= new BMapGL.ScaleControl({ anchor:BMAP_ANCHOR_TOP_RIGHT, //offset为一个Size的实例，接受的俩个参数分别代表水平方向距离跟垂直方向距离 offset:new BMapGL.Size(10,10) }) map.addControl(scaleCtrl)//添加比例尺控件1.用哪个属性设置控件跟地图边界的偏移量：offset
百度地图_添加覆盖物
所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。
1、添加覆盖物： map.addOverlay(覆盖物实例)
1.1、添加点（标注点）使用的类： Marker
var point = new BMapGL.Point(116.404,39.915); var marker = new BMapGL.Marker(point); // 创建标注点 map.addOverlay(marker);// 将标注添加到地图中1.2、添加多边形
使用的类： Polygon
var polygon = new BMapGL.Polygon([ new BMapGL.Point(116.387112,39.920977), new BMapGL.Point(116.385243,39.913063), new BMapGL.Point(116.394226,39.917988), new BMapGL.Point(116.401772,39.921364), new BMapGL.Point(116.41248,39.927893) ], {strokeColor:"blue",strokeWeight:2, strokeOpacity:0.5}); map.addOverlay(polygon);2、删除覆盖物： map.removeOverlay(具体覆盖物实例) 或者 map.clearOverlays()
var overlays = map.getOverlays()//获取地图的所有覆盖物 map.removeOverlay(overlays[0])//删除对应的覆盖物 //map.clearOverlays()//删除地图上所有的覆盖物3、监听覆盖物事件
overlay.addEventListener('事件名称'，callback)marker.addEventListener("click", function(e){ console.log(e) });1.使用哪个类创建标注点：Marker
百度地图_自定义标注图标
1、百度地图_自定义标注图标
Icon(url: String, size: Size , opts: IconOptions)
var myIcon = new BMapGL.Icon("markers.png",new BMapGL.Size(50, 50), //指定放置图标区域的大小
{
//指定地理点跟图标左上角的相对偏移量
anchor: new BMapGL.Size(10, 25),
});
2、使用自定义的标注图标创建标注点
// 创建标注对象并添加到地图
var marker = new BMapGL.Marker(point, { icon: myIcon });
map.addOverlay(marker);1.下列说法错误的是：自定义图标之后，地图上标注点就会直接显示自定义的图标
百度地图_添加文本标注
1、添加文本标注
使用的类： Label
var point = new BMapGL.Point(116.404,39.915); var content = "label"; var label = new BMapGL.Label(content, { //创建文本标注 position: point, // 设置标注的地理位置 offset: new BMapGL.Size(10, 20) // 设置标注的偏移量 }) map.addOverlay(label);2、修改文本标注的样式
label.setStyle({ // 设置label的样式 color: '#000', fontSize: '30px', border: '2px solid #1E90FF' })1.下列说法错误的是：添加的文本标注不能监听鼠标的点击事件
百度地图_正/逆地址解析
Geocoder.getLocation(Point,callback)1、获取地址解析器
new BMapGL.Geocoder()2、使用地址解析器
地址解析：根据地址描述获得该位置的地理经纬度坐标
Geocoder.getPoint(具体地址,callback)// 创建地址解析器实例 var geocoder = new BMapGL.Geocoder() //通过具体地址获得该地址对应的地理位置的经纬度坐标，并进行使用 geocoder.getPoint('北京市清华大学',function(p){ console.log(p) map.centerAndZoom(p,15) var marker=new BMapGL.Marker(p) map.addOverlay(marker) },'北京市')在调用 Geocoder.getPoint() 方法时您需要提供地址解析所在的城市。
逆地址解析：根据经纬度坐标点获得该地点的地址描述
map.addEventListener('click',function(e){ console.log(e) //根据地理经纬度坐标获取具体地址信息 geocoder.getLocation(e.latlng,function(result){ console.log(result) }) })
百度地图_信息窗口
1、使用的类： InfoWindow
map.addEventListener('click', function(e) { geocoder.getLocation(e.latlng,function (result) { var str='当前地址为：'+result.address //实例化信息窗口 var infowindow = new BMapGL.InfoWindow(str, { width: 100,//信息窗口宽度 height: 50,//信息窗口高度 title: '提示'//信息窗口标题 }) // 在地图上打开信息窗口 map.openInfoWindow(infowindow,e.latlng) }) })同一时刻只能有一个信息窗口在地图上打开
百度地图_规划驾车路线
1、创建驾车导航实例
DrivingRoute(location,options)2、使用实例发起检索
DrivingRoute.search(start,end)
// 创建驾车导航的实例
var driving = new BMapGL.DrivingRoute(map,
{ //设置结果呈现
renderOptions: { map: map, autoViewport: true },
//检索完成后的回调函数
onSearchComplete: function (result) {
console.log(result)
}
})
//获取地址解析器
var geocoder = new BMapGL.Geocoder()
var startPoint, endPoint;
document.querySelector('#start').onblur = function (e) {
// 获取起点的坐标
geocoder.getPoint(e.target.value, function (p) {
startPoint = p
})
}
document.querySelector('#end').onblur = function (e) {
//获取终点的坐标
geocoder.getPoint(e.target.value,
function (p) {
endPoint = p
})
}
document.querySelector('#search').onclick = function () {
//发起检索
driving.search(startPoint,endPoint)
}
1.下列哪个写法可以发起路线的检索：DrivingRoute.search()
百度地图_规划公交路线
1、创建公交导航实例
TransitRoute(location,options)2、使用实例发起检索
TransitRoute.search(start,end)
//创建公交导航实例
var transit = new BMapGL.TransitRoute(map, {
renderOptions: { map: map },
onSearchComplete: function (result) {
// 获取第一个计划
var plan = result.getPlan(0)
var distance = plan.getDistance(true)
var duration = plan.getDuration(true)
document.querySelector('.result').innerHTML = '总路程为：' + distance + '；预计花费' + duration
}
})
//获取地址解析器
var geocoder = new BMapGL.Geocoder()
var startPoint, endPoint;
document.querySelector('#start').onblur = function (e) {
// 获取起点的坐标
geocoder.getPoint(e.target.value, function (p) {
startPoint = p
})
}
document.querySelector('#end').onblur = function (e) {
//获取终点的坐标
geocoder.getPoint(e.target.value,function (p) {
endPoint = p
})
}
document.querySelector('#search').onclick = function () {
//发起检索
transit.search(startPoint,endPoint)
}1.路线检索成功后回调函数是：onSearchComplete
百度地图_规划步行路线
1、创建步行导航实例
WalkingRoute(location,options)2、使用实例发起检索
//创建步行导航实例 var walking = new BMapGL.WalkingRoute(map, { renderOptions: { map: map }, onSearchComplete: function (result) { // 获取第一个计划 var plan = result.getPlan(0) var distance = plan.getDistance(true) var duration = plan.getDuration(true) document.querySelector('.result').innerHTML = '总路程为：' + distance + '；预计花费' + duration } }) //获取地址解析器 var geocoder = new BMapGL.Geocoder() var startPoint, endPoint; document.querySelector('#start').onblur = function (e) { // 获取起点的坐标 geocoder.getPoint(e.target.value, function (p) { startPoint = p }) } document.querySelector('#end').onblur = function (e) { //获取终点的坐标 geocoder.getPoint(e.target.value, function(p) { endPoint = p }) } document.querySelector('#search').onclick = function () { //发起检索 walking.search(startPoint,endPoint) }1.检索步行路线使用：WalkingRoute.search()
百度地图_定位
1、浏览器定位：优先调用浏览器H5定位接口，如果失败会调用IP 定位
使用的类： Geolocation
// 创建定位实例 var geolocation = new BMapGL.Geolocation(); //获取定位并传递回调函数 geolocation.getCurrentPosition(function(r) { console.log(r) //判断返回的状态码是否为成功 if (geolocation.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); } else { alert('失败' + geolocation.getStatus()); } });2、IP定位：根据用户IP 返回城市级别的定位结果
使用的类： LocalCity
//创建ip定位实例 var myCity = new BMapGL.LocalCity(); myCity.get(function(result){ var cityName = result.name; //设置地图中心点，参数除了可以为坐标点以外，还支持城市名 map.setCenter(cityName); console.log("当前定位城市:" + cityName); });1.通过IP定位使用：Geolocation
百度地图_自定义视角动画
您可以自定义从地图上某一地点切换到另一地点的3D过渡动画效果。
1、初始化地图
2、自定义关键帧
var keyFrames = [ { center: new BMapGL.Point(116.40396298757886,39.91511908708907), // 定义第一个关键帧帧地图中心点 zoom: 18, // 定义第一个关键帧地图等级 tilt: 60, // 定义第一个关键帧地图倾斜角度 heading: 0, // 定义第一个关键帧地图旋转方向 percentage: 0 // 定义第一个关键帧处于动画过程的百分比，取值范围0~1 }, { center: new BMapGL.Point(116.38096834279554,39.9156803086881), // 定义第二个关键帧地图中心点 zoom: 18, // 定义第二个关键帧地图等级 tilt: 60, // 定义第二个关键帧地图倾斜角度 heading: 0, // 定义第二个关键帧地图旋转方向 percentage: 1 // 定义第二个关键帧处于动画过程的百分比，取值范围0~1 }, ];3、设置动画属性
var opts = { duration: 10000, // 设置每次迭代动画持续时间 delay: 3000, // 设置动画延迟开始时间 interation: 1 // 设置动画迭代次数 };4、创建动画实例
var animation = new BMapGL.ViewAnimation(keyFrames, opts);5、播放动画
map.startViewAnimation(animation); //传入动画实例6、强制停止动画
map.cancelViewAnimation(animation); // 强制停止动画
