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

简介: 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

目录
相关文章
|
3天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
15 0
|
26天前
|
JavaScript
自定义全能搜索HTML源码
自定义全能搜索HTML源码
19 1
自定义全能搜索HTML源码
|
2月前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
46 0
|
1月前
|
移动开发 前端开发 JavaScript
HTML语言基础知识入门
HTML语言基础知识入门
|
1月前
|
存储 移动开发 编解码
html5的新特性详解
HTML5是构建和呈现互联网内容的语言描述方式,HTML5在HTML4的基础上增加了许多新特性,使其更具语义化、更加标准化,同时也提高了用户体验和开发效率。以下是HTML5的部
|
1月前
|
Web App开发 iOS开发
编程笔记 html5&css&js 026 HTML输入类型(2/2)
编程笔记 html5&css&js 026 HTML输入类型(2/2)
|
1月前
|
移动开发 数据安全/隐私保护 HTML5
编程笔记 html5&css&js 025 HTML输入类型(1/2)
编程笔记 html5&css&js 025 HTML输入类型(1/2)
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
59 1
|
2月前
|
前端开发 JavaScript API
【HTML】SVG实现炫酷的描边动画
今天闲来无事,看到Antfu大佬的个性签名,觉得还是非常炫酷的,于是也想要搞一个自己的个性签名用来装饰自己的门面,不过由于手写的签名太丑了,遂放弃。于是尝试理解原理,深入研究此等密法,终于小有所成,发现原来是描边动画,于是记载如下,方便日后借鉴。
43 3