From 5f00696dfb25bc90034448ceb634ed1ef256681a Mon Sep 17 00:00:00 2001
From: qiyunfeng-create <1940665526@qq.com>
Date: 星期四, 21 八月 2025 21:13:35 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/xiehe_website
---
src/components/MapContainer.vue | 90 +++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 90 insertions(+), 0 deletions(-)
diff --git a/src/components/MapContainer.vue b/src/components/MapContainer.vue
new file mode 100644
index 0000000..6f2a549
--- /dev/null
+++ b/src/components/MapContainer.vue
@@ -0,0 +1,90 @@
+<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', // 鏇挎崲涓轰綘鐨凨ey
+ 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>
--
Gitblit v1.9.1