高德地图的 JavaScript API 提供了 `AMap.Map` 类来创建
地图实例。在创建
地图实例时，可以通过传递不同的参数来设置
地图的属性，包括视觉效果模式。
要在 Vue 应用程序中使用
高德地图，可以将 `AMap.Map` 类封装成 Vue 组件。以下是一个简单的例子：
```html
<template>
<div id="map-container">
<div ref="map" style="width: 100%; height: 100%;"></div>
<div class="switch-btn" @click="toggleMode">{{ modeText }}</div>
</div>
</template>
<script>
export default {
data() {
return {
mode: '
2D',
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
// 创建
地图实例
this.map = new AMap.Map(this.$refs.map, {
zoom: 16,
center: [116.397428, 39.90923],
viewMode: '
3D', // 默认为
3D 视觉效果模式
});
},
toggleMode() {
// 切换视觉效果模式
this.mode = this.mode === '
2D' ? '
3D' : '
2D';
this.map.setFeatures(this.mode === '
2D' ? ['road', 'building'] : ['road', 'building', 'satellite']);
},
},
computed: {
modeText() {
return this.mode === '
2D' ? '切换到
3D' : '切换到
2D';
},
},
};
</script>
<style>
#map-container {
position: relative;
width: 100%;
height: 100vh;
}
.switch-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
cursor: pointer;
}
</style>
```
在上面的代码中，我们创建了一个
地图容器和一个切换按钮。初始时，
地图使用
3D 视觉效果模式。当用户点击切换按钮时，我们会切换到
2D 视觉效果模式，并将
地图的图层设置为只显示道路和建筑物。如果用户再次点击切换按钮，则会切换回
3D 视觉效果模式，并将
地图的图层设置为显示卫星图像、道路和建筑物。
需要注意的是，在 Vue 应用程序中使用
高德地图时，需要在 `mounted` 钩子函数中初始化
地图，因为只有在组件挂载到 DOM 中之后，才能正确地获取容器元素的引用。同时，为了防止内存泄漏，需要在组件销毁时销毁
地图实例。可以在 `beforeDestroy` 钩子函数中调用 `AMap.Map` 类的 `destroy` 方法来完成销毁操作。
3178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
