高德地图 轨迹点画箭头 js
时间: 2023-08-20 10:04:44 浏览: 167
以下是使用高德地图 JavaScript API 绘制轨迹点并画箭头的示例代码:
```javascript
// 初始化地图
var map = new AMap.Map('mapContainer', {
zoom: 15,
center: [116.397428, 39.90923]
});
// 绘制轨迹点
var path = [
[116.397428, 39.90923],
[116.397428, 39.90953],
[116.397528, 39.90953],
[116.397528, 39.90983],
[116.397628, 39.90983]
];
var polyline = new AMap.Polyline({
map: map,
path: path,
strokeColor: '#00FF00',
strokeWeight: 3
});
// 绘制箭头
var arrowPath = [
[116.397428, 39.90923],
[116.397428, 39.90953],
[116.397528, 39.90953],
[116.397528, 39.90983],
[116.397628, 39.90983]
];
var arrow = new AMap.Polyline({
map: map,
path: arrowPath,
strokeColor: '#FF0000',
strokeWeight: 3,
strokeStyle: 'solid',
strokeOpacity: 1,
zIndex: 50,
lineJoin: 'round',
showDir: true,
dirImg: 'https://webapi.amap.com/images/car.png',
dirImgSize: [20, 20],
dirImgOffset: [0, -5]
});
```
在上面的代码中,首先使用 `AMap.Map` 构造函数初始化地图,然后使用 `AMap.Polyline` 构造函数绘制轨迹点和箭头。其中,轨迹点和箭头的路径都通过数组传递,`strokeColor`、`strokeWeight` 等参数用于设置线条的颜色、宽度等样式。在绘制箭头时,需要设置 `showDir` 为 `true`,并且通过 `dirImg`、`dirImgSize`、`dirImgOffset` 等参数设置箭头图片及其相关样式。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)