百度地图的使用---2、折线（Polyline）的使用、自定义样式和自适应缩放

先看效果：

再看步骤：

1、HTML

<div id="mapContainer" style={{width:"100%", height:"400px"}}/>

2、获取地图容器元素

const mapContainer = document.getElementById("mapContainer");

3、创建地图实例

const map = new BMapGL.Map("mapContainer");

4、设置中心点和缩放级别

map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 15);

5、创建Polyline组件

const polyline = new BMap.Polyline([
    new BMap.Point(116.404, 39.915),
    new BMap.Point(116.414, 39.915),
    new BMap.Point(116.424, 39.915)
]);
map.addOverlay(polyline);

效果：

6、改变折线的宽度和颜色

const points = [
      new BMapGL.Point(116.404, 39.915),
      new BMapGL.Point(116.414, 39.915),
      new BMapGL.Point(116.424, 39.915)
];
const polylineOptions = {
      strokeColor: "red", // 设置折线颜色
      strokeWeight: 3 // 设置折线宽度
};
const polyline = new BMapGL.Polyline(points, polylineOptions);
map.addOverlay(polyline);

效果：

7、扩展：实际开发中，坐标点分布可能密集，也可能分散，怎么定义缩放倍数？

首先，使用map.getViewport()方法获取一个能够包含所有标记和折线的视窗范围，

然后，使用map.setViewport()方法将地图的缩放级别和中心点自适应地设置为该视窗范围。

这样，无论标记和折线的位置如何变化，地图都会自动调整缩放级别和中心点，以确保它们都能显示在地图上。

// 自适应设置缩放级别和中心点
const viewport = map.getViewport(points);
map.setViewport(viewport);

最终效果：

8、实际开发中，还可以组合使用Marker标点和Polyline，实现更复杂的效果。