diff --git a/app/app.vue b/app/app.vue index d310af4..5e732a5 100644 --- a/app/app.vue +++ b/app/app.vue @@ -1,256 +1,10 @@ - + \ No newline at end of file diff --git a/app/components/AMapComponent.vue b/app/components/AMapComponent.vue new file mode 100644 index 0000000..499e5f0 --- /dev/null +++ b/app/components/AMapComponent.vue @@ -0,0 +1,330 @@ + + + + + diff --git a/app/config/amap.ts b/app/config/amap.ts new file mode 100644 index 0000000..d957f4f --- /dev/null +++ b/app/config/amap.ts @@ -0,0 +1,78 @@ +// 高德地图配置 +export const amapConfig = { + // 高德地图Web服务API Key + // 在高德开放平台申请:https://console.amap.com/dev/key/app + key: '11da89fddf9340d0a69d4fff53c0ec4b', + + // 高德地图安全密钥(Security Key) + // 在高德开放平台的安全设置中获取,用于保护API Key + securityKey: '32dca5ef246f3b96234cd8ef891e4d59', + + // 地图默认配置 + defaultCenter: [39.9042, 116.4074], // 北京坐标 + defaultZoom: 13, + + // 地图样式 + styles: { + normal: 'amap://styles/normal', + dark: 'amap://styles/dark', + light: 'amap://styles/light', + fresh: 'amap://styles/fresh', + grey: 'amap://styles/grey', + graffiti: 'amap://styles/graffiti', + macaron: 'amap://styles/macaron', + blue: 'amap://styles/blue', + darkblue: 'amap://styles/darkblue', + wine: 'amap://styles/wine' + }, + + // 服务网点坐标(示例数据) + servicePoints: [ + { + id: 1, + name: '北京总部', + address: '北京市朝阳区xxx街道xxx号', + position: [116.4074, 39.9042], + phone: '010-12345678', + hours: '9:00-18:00' + }, + { + id: 2, + name: '上海分公司', + address: '上海市浦东新区xxx路xxx号', + position: [121.4737, 31.2304], + phone: '021-87654321', + hours: '9:00-18:00' + }, + { + id: 3, + name: '广州分公司', + address: '广州市天河区xxx大道xxx号', + position: [113.2644, 23.1291], + phone: '020-11223344', + hours: '9:00-18:00' + } + ] +} + +// 获取地图API URL +export const getAMapScriptUrl = () => { + return `https://webapi.amap.com/maps?v=2.0&key=${amapConfig.key}` +} + +// 获取安全密钥(用于服务端签名) +export const getSecurityKey = () => { + return amapConfig.securityKey +} + +// 验证密钥配置 +export const validateKeys = () => { + const hasKey = amapConfig.key && amapConfig.key !== 'YOUR_AMAP_KEY' + const hasSecurityKey = amapConfig.securityKey && amapConfig.securityKey !== 'YOUR_SECURITY_KEY' + + return { + hasKey, + hasSecurityKey, + isValid: hasKey && hasSecurityKey + } +} diff --git a/app/pages/index/index.vue b/app/pages/index/index.vue new file mode 100644 index 0000000..bb6e6a1 --- /dev/null +++ b/app/pages/index/index.vue @@ -0,0 +1,254 @@ + + diff --git a/app/pages/map-demo.vue b/app/pages/map-demo.vue new file mode 100644 index 0000000..6e347ed --- /dev/null +++ b/app/pages/map-demo.vue @@ -0,0 +1,372 @@ + + + + + diff --git a/package.json b/package.json index 88d14f4..bb55ad4 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "postinstall": "nuxt prepare" }, "dependencies": { + "@amap/amap-jsapi-loader": "^1.0.1", "@nuxt/eslint": "1.9.0", "@nuxt/image": "1.11.0", "@nuxt/ui": "4.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d141aa0..d3c14fe 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@amap/amap-jsapi-loader': + specifier: ^1.0.1 + version: 1.0.1 '@nuxt/eslint': specifier: 1.9.0 version: 1.9.0(@typescript-eslint/utils@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(@vue/compiler-sfc@3.5.22)(eslint@9.38.0(jiti@2.6.1))(magicast@0.3.5)(typescript@5.9.3)(vite@7.1.12(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.0)(yaml@2.8.1)) @@ -73,6 +76,9 @@ packages: resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==} engines: {node: '>=10'} + '@amap/amap-jsapi-loader@1.0.1': + resolution: {integrity: sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==} + '@antfu/install-pkg@1.1.0': resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==} @@ -4764,6 +4770,8 @@ snapshots: '@alloc/quick-lru@5.2.0': {} + '@amap/amap-jsapi-loader@1.0.1': {} + '@antfu/install-pkg@1.1.0': dependencies: package-manager-detector: 1.5.0