vue 高德地图 切换图层
时间: 2023-09-30 11:02:06 浏览: 54
在 Vue 中使用高德地图,可以通过以下步骤切换图层:
1. 在 Vue 组件中引入高德地图 API:
```
<script src="https://webapi.amap.com/maps?v=1.4.15&key=yourKey"></script>
```
2. 在 `mounted` 钩子函数中初始化地图对象,并设置默认图层:
```
mounted() {
// 初始化地图对象
const map = new AMap.Map('mapContainer', {
zoom: 10,
center: [116.397428, 39.90923],
layers: [
new AMap.TileLayer(),
new AMap.TileLayer.Satellite()
]
});
}
```
3. 在需要切换图层的方法中,调用 `setLayers` 方法实现切换:
```
methods: {
switchLayer() {
const map = this.map;
const satelliteLayer = new AMap.TileLayer.Satellite();
const roadNetLayer = new AMap.TileLayer();
map.setLayers([satelliteLayer, roadNetLayer]);
}
}
```
其中,`map` 是初始化地图对象后得到的地图实例,`satelliteLayer` 是卫星图层对象,`roadNetLayer` 是路网图层对象。调用 `setLayers` 方法切换图层时,需要将需要显示的图层对象作为数组传入。