1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <template>
| <div>
| <div id="map-container" ref="mapContainer"></div>
| </div>
| </template>
|
| <script setup>
| import { onMounted, ref } from 'vue'
| const mapContainer = ref(null)
|
| onMounted(() => {
| // 初始化高德地图
| const map = new AMap.Map(mapContainer.value, {
| zoom: 10, // 初始缩放级别
| center: [116.397428, 39.90923], // 初始中心点（北京坐标）
| })
|
| // 添加基础控件
| AMap.plugin(['AMap.ToolBar'], () => {
| const toolbar = new AMap.ToolBar()
| map.addControl(toolbar)
| })
| });
|
|
| </script>
|
| <style lang="scss" scoped>
| #map-container {
| width: 300px;
| height: 160px;
| }
| </style>
|
|
