目录

百度地图_账号和获取密钥

百度地图_初始化 

 百度地图_变更地图类型

 百度地图_添加控件

 百度地图_改变控件位置

 百度地图_添加覆盖物

百度地图_自定义标注图标 

 百度地图_添加文本标注

百度地图_正/逆地址解析 

百度地图_信息窗口

百度地图_规划驾车路线 

百度地图_规划公交路线 

百度地图_规划步行路线 

 百度地图_定位

百度地图_自定义视角动画 

百度地图_账号和获取密钥

百度地图提供了一套由JavaScript语言编写的应用程序接口，该套接 口目前最新版本为 JavaScript API GL v1.0 。

使用这些接口我们就可以在页面上构建功能丰富、交互性强的地图应用。

接口使用方法：

     1 注册百度账号 https://lbsyun.baidu.com/

     2 申请成为百度开发者 

百度地图(HTML5新特性)-全面详解（学习总结—从入门到深化）-编程之家

 百度地图(HTML5新特性)-全面详解（学习总结—从入门到深化）-编程之家

 百度地图(HTML5新特性)-全面详解（学习总结—从入门到深化）-编程之家

 百度地图(HTML5新特性)-全面详解（学习总结—从入门到深化）-编程之家

 百度地图(HTML5新特性)-全面详解（学习总结—从入门到深化）-编程之家

 3、获取服务密钥

 4、使用服务相关功能

1.下列描述错误的是： 使用百度地图的接口不需要密钥

百度地图_初始化 

百度地图(HTML5新特性)-全面详解（学习总结—从入门到深化）-编程之家

 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

 百度地图_添加控件

百度地图(HTML5新特性)-全面详解（学习总结—从入门到深化）-编程之家

 控件是负责与地图交互的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 表示控件的停靠位置，即控件停靠在地图的哪个 角。当地图尺寸发生变化时，控件会根据停靠位置的不同来调整 自己的位置。

百度地图(HTML5新特性)-全面详解（学习总结—从入门到深化）-编程之家

 

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)

百度地图(HTML5新特性)-全面详解（学习总结—从入门到深化）-编程之家

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)})})

同一时刻只能有一个信息窗口在地图上打开

百度地图_规划驾车路线 

百度地图(HTML5新特性)-全面详解（学习总结—从入门到深化）-编程之家

 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()

百度地图_规划公交路线 

百度地图(HTML5新特性)-全面详解（学习总结—从入门到深化）-编程之家

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

百度地图_规划步行路线 

百度地图(HTML5新特性)-全面详解（学习总结—从入门到深化）-编程之家

 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

百度地图_自定义视角动画 

百度地图(HTML5新特性)-全面详解（学习总结—从入门到深化）-编程之家

 您可以自定义从地图上某一地点切换到另一地点的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);      // 强制停止动画