vue 高德地图 显示公司位置
时间: 2023-07-10 09:06:21 浏览: 164
首先你需要在高德地图开放平台申请一个 API Key,并且在项目中引入高德地图 SDK。然后,你可以使用 Vue.js 框架来编写代码。
下面是一个简单的例子,使用 Vue.js 和高德地图 SDK 显示公司位置:
1. 在 index.html 中引入高德地图的 JavaScript SDK:
```
<script src="https://webapi.amap.com/maps?v=1.4.15&key=your-api-key"></script>
```
2. 在 Vue.js 组件中创建地图并显示公司位置:
```
<template>
<div id="map"></div>
</template>
<script>
export default {
mounted() {
// 创建地图
const map = new window.AMap.Map('map', {
center: [lng, lat], // 公司位置的经纬度
zoom: 16 // 地图缩放级别
})
// 添加标记
const marker = new window.AMap.Marker({
position: [lng, lat], // 公司位置的经纬度
map: map
})
}
}
</script>
```
请注意,上面的 `lng` 和 `lat` 分别是公司位置的经度和纬度,你需要将其替换为实际的值。
3. 在 CSS 文件中设置地图容器的大小:
```
#map {
width: 100%;
height: 600px;
}
```
这样就可以在 Vue.js 应用程序中显示公司位置了。当然,你还可以添加其他的功能,比如缩放控件、信息窗体等等,具体可以参考高德地图 SDK 提供的文档。