接上文百度地图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);
      });

3.地址的正反解析

地址解析服务提供从地址转换到经纬度的服务，反之，逆地址解析则提供从经纬度坐标转换到地址的转换功能。

 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);
          
        });
      });

 实现效果：

 

4.轨迹动画

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();

 实现效果：

5.驾车线路规划

百度地图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);
              }
            },
            "广州市"
          );
        },
        "广州市"
      );

实现效果：

 

6.交通流量图

地图可以包含一个或多个图层，每个图层在每个级别都是由若干张图块组成的，它们覆盖了地球的整个表面。例如您所看到包括街道、兴趣点、学校、公园等内容的地图展现就是一个图层，另外交通流量的展现也是通过图层来实现的。下面主要介绍交通流量图层的使用。

添加交通流量图层

通过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(); // 移除交通流量图层