百度地图(HTML5新特性)-全面详解（学习总结---从入门到深化）百度地图提供了一套由JavaScript语言编写的应

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

百度地图_初始化

百度地图_变更地图类型

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

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

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

接口使用方法：

1 注册百度账号 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);      
  // 强制停止动画