写一个vue展示高德地图
时间: 2024-04-29 20:21:42 浏览: 8
首先你需要在 HTML 中引入高德地图的 JavaScript API:
```HTML
<script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script>
```
其中,YOUR_KEY 需要替换成你自己的高德地图 API Key。
然后,在 Vue 组件中,可以通过以下步骤来展示高德地图:
1. 在 `mounted` 钩子函数中创建地图实例:
```JavaScript
mounted() {
const map = new AMap.Map('map-container', {
zoom: 12,
center: [116.397428, 39.90923]
})
}
```
其中,`map-container` 是一个 div 元素的 id,用来承载地图。
2. 在 `mounted` 钩子函数中引入插件:
```JavaScript
AMap.plugin(['AMap.ToolBar'], function() {
map.addControl(new AMap.ToolBar())
})
```
这里引入了一个工具条插件,用于缩放和平移地图。
3. 在模板中添加地图容器:
```HTML
<template>
<div>
<div id="map-container" style="height: 400px;"></div>
</div>
</template>
```
这里,高度可以根据实际情况来调整。
完整代码如下:
```HTML
<template>
<div>
<div id="map-container" style="height: 400px;"></div>
</div>
</template>
<script>
export default {
mounted() {
const map = new AMap.Map('map-container', {
zoom: 12,
center: [116.397428, 39.90923]
})
AMap.plugin(['AMap.ToolBar'], function() {
map.addControl(new AMap.ToolBar())
})
}
}
</script>
<style>
/* 样式可以根据实际情况来调整 */
#map-container {
width: 100%;
height: 400px;
}
</style>
```