百度地图_规划公交路线
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
