百度地图_添加文本标注
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); // 强制停止动画
