接上文百度地图API开发：
百度地图API-地图初始化及初步使用_HM-hhxx！的博客-CSDN博客
目录
1.获取坐标值
2.定位获取点
3.地址的正反解析
4.轨迹动画
5.驾车线路规划
6.交通流量图
1.获取坐标值在百度地图API中，可以通过监听地图点击事件，获取点击位置的坐标值
map.addEventListener('click', function (e) {
alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
});实现效果：
2.定位获取点
JavaScript API提供在Web端获取当前位置信息的方法，融合了浏览器定位、IP定位、安卓定位SDK辅助定位等多种手段，提供了获取当前准确位置、获取当前城市信息等功能。 浏览器定位精度和性能依赖浏览器自身特性，IP定位的精度值为城市级别。 对于安卓WebView页面的开发者，可以结合定位SDK进行辅助定位，使用方法参见定位SDK相关章节。
下面以获取浏览器定位和获取IP地址定位为例：
获取浏览器定位：
// 获取浏览器定位，https ，localhost,
var geolocation = new BMapGL.Geolocation();
geolocation.getCurrentPosition(function (r) {
console.log(this.getStatus());
console.log(r);
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
console.log(r.point);
map.centerAndZoom(r.point, 20);
}
});获取IP地址定位：
// // 获取IP地址定位
var myCity = new BMapGL.LocalCity();
myCity.get(function (result) {
console.log(result);
console.log(result.name);
map.centerAndZoom(result.name, 20);
});地址解析服务提供从地址转换到经纬度的服务，反之，逆地址解析则提供从经纬度坐标转换到地址的转换功能。
1）获取天安门地址
var addr = "天安门";
// 创建地址解析实例
var myGeo = new BMapGL.Geocoder();
myGeo.getPoint(
addr,
function (point) {
console.log(point);
if (point) {
map.centerAndZoom(point, 20);
// 地图倾斜角度
map.setTilt(50);
map.addOverlay(new BMapGL.Marker(point, { title: addr }));
} else {
alert("您选择地址没有解析到结果!");
}
},
"北京市"
);
实现效果:
2)设置输入框根据输入的地名获取地址
var input = document.querySelector("#input");
input.focus();
input.addEventListener("keyup", function (e) {
// console.log(e.key);
if (e.key === "Enter") {
var myGeo = new BMapGL.Geocoder();
myGeo.getPoint(
input.value,
function (point) {
console.log(point);
if (point) {
map.centerAndZoom(point, 20);
// 地图倾斜角度
map.setTilt(50);
map.addOverlay(new BMapGL.Marker(point, { title: addr }));
} else {
alert("您选择地址没有解析到结果!");
}
},
"北京市"
);
}
});实现效果：
3）通过点击地图弹出地名
// 通过鼠标点击地图位置，获取地址信息
map.addEventListener("click", function (e) {
var pt = e.point;
// 实例化解析器
var myGeo = new BMapGL.Geocoder();
console.log(e);
// 解析坐标点
myGeo.getLocation(e.latlng, function (rs) {
console.log(rs);
console.log(rs.address);
// 地图打开信息窗口
var windowPoint = new BMapGL.Point(rs.point.lng,rs.point.lat);
console.log(windowPoint);
var infoWindow = new BMapGL.InfoWindow(rs.address, {
width: 0,
height: 0,
title: "地址名称",
});
map.openInfoWindow(infoWindow, windowPoint);
});
});实现效果：
JSAPI GL在视角动画的基础上，封装了轨迹动画开源库，可以实现在轨迹动态播放的同时，视角跟随移动。
//设置轨迹点
var path = [
{
lng: 116.41306428772361,
lat: 39.92160971417119,
},
{
lng: 116.41755514151865,
lat: 39.92169928723568,
},
{
lng: 116.41771030067392,
lat: 39.918377991785995,
},
{
lng: 116.41319048598406,
lat: 39.91838693885525,
},
{
lng: 116.41306428772361,
lat: 39.92160971417119,
},
];
var points = [];
path.forEach((item) => {
points.push(new BMapGL.Point(item.lng, item.lat));
});
// 通过地图多个点生成折线
var polyline = new BMapGL.Polyline(points, {
strokeColor: "#ffaaaa",
strokeWeight: 10,
strokeOpacity: 0.8,
});
// 创建轨迹动画
var trackAnimation = new BMapGLLib.TrackAnimation(map, polyline, {
tilt: 50,
duration: 10000,
delay: 5000,
overallView: true,
});
trackAnimation.start();实现效果：
百度地图JavaScript API GL提供了驾车、公交、步行三种出行方式的路线规划功能。开发者在使用线路规划的接口时，可以使用我们提供的默认展示效果。也可以通过监听事件回调，使用检索数据完成自己的需求。
基础驾车路线规划服务：BMapGL.DrivingRoute
公交路线规划：BMapGL.TransitRoute
步行路线规划：BMapGL.WalkingRoute
下面使用使用 BMapGL.DrivingRoute实现驾车路线规划：
var addr = "广州塔";
// 创建地址解析实例
var myGeo = new BMapGL.Geocoder();
myGeo.getPoint(
addr,
function (point) {
console.log(point);
let startPoint = point;
if (point) {
map.centerAndZoom(point, 20);
// 地图倾斜角度
map.setTilt(50);
map.addOverlay(new BMapGL.Marker(point, { title: addr }));
} else {
alert("您选择地址没有解析到结果!");
}
// 查找终点位置体育西路
var endAddr = "天河区体育西路地铁a口";
myGeo.getPoint(
endAddr,
function (point) {
console.log(point);
if (point) {
let endPoint = point;
// 设置驾车路线
var driving = new BMapGL.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true,
},
onSearchComplete: function (results) {
console.log(results);
// 获取第一条路线
var plan = results.getPlan(0);
console.log(plan);
console.log("路程：" + plan.getDistance());
console.log("耗时：" + plan.getDuration());
},
});
driving.search(startPoint, endPoint);
}
},
"广州市"
);
},
"广州市"
);实现效果：
地图可以包含一个或多个图层，每个图层在每个级别都是由若干张图块组成的，它们覆盖了地球的整个表面。例如您所看到包括街道、兴趣点、学校、公园等内容的地图展现就是一个图层，另外交通流量的展现也是通过图层来实现的。下面主要介绍交通流量图层的使用。
添加交通流量图层
通过map.setTrafficOn方法可以向地图添加交通流量图层，示例代码如下：
var map = new BMapGL.Map("all-map"); // 创建地图实例
var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.setTrafficOn(); // 添加交通流量图层实现效果：
也可使用setTrafficOff()移除交通流量图层：
map.setTrafficOff(); // 移除交通流量图层
