<template>
|
<div class="map-container">
|
<!-- 地图容器 -->
|
<div id="map-container" ref="mapContainer"></div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import AMapLoader from '@amap/amap-jsapi-loader'
|
|
// 配置安全密钥（推荐）
|
window._AMapSecurityConfig = {
|
securityJsCode: '4c6cee842f5412a45a781aeaa76e12cc', // 高德控制台获取
|
}
|
|
const mapContainer = ref(null)
|
const mapInstance = ref(null)
|
const marker = ref(null)
|
|
// 示例地点数据
|
const location = ref({
|
name: '天安门广场',
|
address: '北京市东城区长安街',
|
position: [116.413823, 39.912052],
|
})
|
|
// 初始化地图
|
onMounted(() => {
|
AMapLoader.load({
|
key: '4c6cee842f5412a45a781aeaa76e12cc', // 替换为你的Key
|
version: '2.0', // SDK版本
|
plugins: ['AMap.Marker', 'AMap.ToolBar', 'AMap.Scale'], // 所需插件
|
})
|
.then((AMap) => {
|
// 创建地图实例
|
mapInstance.value = new AMap.Map(mapContainer.value, {
|
viewMode: '2D', // 默认使用2D模式
|
zoom: 15, // 初始缩放级别
|
center: location.value.position, // 初始中心点
|
})
|
|
// 添加控件
|
mapInstance.value.addControl(new AMap.ToolBar())
|
mapInstance.value.addControl(new AMap.Scale())
|
|
// 添加标记点
|
marker.value = new AMap.Marker({
|
position: location.value.position,
|
title: location.value.name,
|
})
|
mapInstance.value.add(marker.value)
|
|
// 点击标记点显示信息
|
marker.value.on('click', () => {
|
alert(`您点击了：${location.value.name}`)
|
})
|
})
|
.catch((error) => {
|
console.error('地图加载失败:', error)
|
})
|
})
|
</script>
|
|
<style scoped>
|
.map-container {
|
position: relative;
|
width: 100%;
|
height: 500px;
|
}
|
|
#map-container {
|
width: 100%;
|
height: 100%;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
}
|
|
.location-card {
|
position: absolute;
|
bottom: 20px;
|
left: 20px;
|
background: white;
|
padding: 15px;
|
border-radius: 8px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
z-index: 10;
|
max-width: 300px;
|
}
|
</style>
|
