web开发高德地图,怎么标记多条线路,有3个车,有9个点,每个车途径3个点,3个车的线路分别用不同颜色显示
时间: 2023-10-30 07:07:07 浏览: 57
在Web开发中,您可以使用高德地图JavaScript API来实现标记多条线路,并用不同颜色显示:
1. 创建地图对象,设置地图中心点和缩放级别。
```
var map = new AMap.Map('mapContainer', {
center: [lng, lat],
zoom: 13
});
```
2. 创建多个Polyline对象,代表每个车辆的路线。
```
var car1Path = new AMap.Polyline({
path: [[lng1, lat1], [lng2, lat2], [lng3, lat3]],
strokeColor: '#FF0000',
strokeWeight: 6,
strokeOpacity: 0.7
});
var car2Path = new AMap.Polyline({
path: [[lng4, lat4], [lng5, lat5], [lng6, lat6]],
strokeColor: '#00FF00',
strokeWeight: 6,
strokeOpacity: 0.7
});
var car3Path = new AMap.Polyline({
path: [[lng7, lat7], [lng8, lat8], [lng9, lat9]],
strokeColor: '#0000FF',
strokeWeight: 6,
strokeOpacity: 0.7
});
```
3. 将Polyline对象添加到地图上。
```
car1Path.setMap(map);
car2Path.setMap(map);
car3Path.setMap(map);
```
4. 根据需要调整地图视野范围,使所有路线都显示在地图上。
```
map.setFitView();
```
注意:在设置Polyline对象时,需要按照途经点的顺序设置路径点;在设置strokeColor属性时,可以使用不同的颜色代表不同的车辆路线。
阅读全文