先看效果:
再看步骤:
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,实现更复杂的效果。