vue高德地图,切换卫星地图
时间: 2024-09-07 12:01:31 浏览: 210
Vue高德地图是一个基于Vue.js的轻量级组件化地图库,它允许你在Vue应用中轻松集成高德地图的功能,包括地图展示、路线规划、定位等。要切换到卫星视图,你可以使用`AMap.Map`的`switchToSatellite`方法。
以下是一个简单的示例:
```html
<template>
<div ref="mapContainer" style="height: 500px; width: 100%;"></div>
</template>
<script>
import AMap from 'vue-amap';
AMap.config('key', 'your_amap_key'); // 替换为你自己的高德地图API key
export default {
components: {
AMap,
},
data() {
return {
map: null,
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
const map = new AMap.Map(this.$refs.mapContainer, {
zoom: 10, // 初始缩放级别
center: [116.404, 39.915], // 北京坐标
});
// 切换到卫星视图
map.switchTo(SwitchType.SATELLITE); // SwitchType是AMap.Map的枚举值
},
},
};
</script>
```
在这个例子中,在`mounted`生命周期钩子里创建了地图实例,并通过调用`switchToSatellite`方法将地图模式切换到卫星视图。
阅读全文