HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解（学习总结---从入门到深化）（上）

2024-01-16 51

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解（学习总结---从入门到深化）

百度地图_规划公交路线

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 创建步行导航实例

WalkingRoute(location,options)

2 使用实例发起检索

WalkingRoute.search(start,end)

        //创建步行导航实例
         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 浏览器定位：优先调用浏览器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);
       });

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

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

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

百度地图提供了一套由JavaScript语言编写的应用程序接口，该套接口目前最新版本为 JavaScript API GL v1.0 。使用这些接口我们就可以在页面上构建功能丰富、交互性强的地图应用。

HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解（学习总结---从入门到深化）（下）：https://developer.aliyun.com/article/1420278

HTML新特性【规划公交路线、规划步行路线、定位、自定义视角动画、账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置】(五)-全面详解（学习总结---从入门到深化）（上）

百度地图_规划公交路线

百度地图_规划步行路线

百度地图_定位

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

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景