百度地图路况信息

 

引入库：

    <!-- 引入百度地图交通路况样式文件 -->
  <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css"/>

    <!-- 引入百度地图交通路况文件 -->
  <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>

使用：

    const map = this.map = new BMap.Map(this.map_container.nativeElement, {
      enableMapClick: true,
      minZoom: 11,
      // maxZoom : 11
    }); // 创建地图实例


    // 这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）
    const point = new BMap.Point(114.064675, 22.550651); // 坐标可以通过百度地图坐标拾取器获取
    map.centerAndZoom(point, 15); // 设置中心和地图显示级别
    map.setMapStyle({ style: 'googlelite' });

    // 添加控件缩放

    const offset = new BMap.Size(20, 15);
    const navigationControl = new BMap.NavigationControl({
      anchor: BMAP_ANCHOR_TOP_LEFT,
      offset: offset,
    });
    map.addControl(navigationControl);

    const ctrl = new BMapLib.TrafficControl({
      showPanel: true , // 是否显示路况提示面板
    });
    map.addControl(ctrl);
    ctrl.showTraffic({ predictDate: { hour: 15, weekday: 5 } });
    ctrl.setAnchor(BMAP_ANCHOR_TOP_LEFT);
    ctrl.setOffset(new BMap.Size(85, 27));

    map.enableScrollWheelZoom(true); // 启动滚轮放大缩小，默认禁用