<template><div class="distance-calculator"><h1>城市距離計算器</h1><!-- 城市輸入框 --><div class="input-group"><inputv-model="city1"placeholder="請輸入第一個城市"@keyup.enter="calculateDistance"/><inputv-model="city2"placeholder="請輸入第二個城市"@keyup.enter="calculateDistance"/></div><!-- 計算按鈕 --><button @click="calculateDistance" :disabled="loading">{{ loading ? '計算中...' : '計算距離' }}</button><!-- 結果顯示 --><div v-if="result" class="result">{{ result }}</div><!-- 錯誤提示 --><div v-if="error" class="error">{{ error }}</div></div>
</template><script>
// 1. 需要安裝的依賴:
// - Vue 3 (已包含在項目中)
// - 高德地圖JS API (通過CDN引入，無需npm安裝)
// - 可選: 如果需要HTTP請求，可以安裝axios (npm install axios)import { ref, onMounted } from 'vue';export default {name: 'DistanceCalculator',setup() {// 2. 響應式數據const city1 = ref('北京'); // 默認值可修改或留空const city2 = ref('上海'); // 默認值可修改或留空const result = ref('');const error = ref('');const loading = ref(false);// 3. 高德地圖實例let geocoder = null;let AMap = null;// 4. 初始化高德地圖const initAMap = () => {return new Promise((resolve, reject) => {// 首先設置安全配置window._AMapSecurityConfig = {securityJsCode: 'efe5df61770675b2985df3e32565fb80'  // 安全密鑰};// 檢查是否已加載if (window.AMap) {AMap = window.AMap;// 確保插件加載完成后再初始化AMap.plugin(['AMap.Geocoder', 'AMap.GeometryUtil'], () => {geocoder = new AMap.Geocoder({city: "全國" // 指定查詢范圍為全國});resolve();});return;}// 動態加載高德地圖JSconst script = document.createElement('script');script.src = `https://webapi.amap.com/maps?v=1.4.15&key=05d4c031a356cdffb8055c0d1532ced8`;  // API keyscript.onload = () => {if (window.AMap) {AMap = window.AMap;// 加載完成后加載插件AMap.plugin(['AMap.Geocoder', 'AMap.GeometryUtil'], () => {try {geocoder = new AMap.Geocoder({city: "全國" // 指定查詢范圍為全國});resolve();} catch (err) {reject(new Error('Geocoder 插件初始化失敗'));}});} else {reject(new Error('AMap 加載失敗'));}};script.onerror = () => {reject(new Error('高德地圖腳本加載失敗'));};document.head.appendChild(script);});};// 5. 計算距離的主要函數const calculateDistance = async () => {if (loading.value) return;try {loading.value = true;error.value = '';result.value = '';// 確保高德地圖已初始化if (!geocoder) {await initAMap();}// 驗證輸入if (!city1.value.trim() || !city2.value.trim()) {throw new Error('請輸入兩個城市名稱');}// 獲取城市坐標const [location1, location2] = await Promise.all([new Promise((resolve, reject) => {geocoder.getLocation(city1.value, (status, result) => {if (status === 'complete' && result.geocodes.length) {resolve(result.geocodes[0].location);} else {reject(new Error(`無法獲取 ${city1.value} 的坐標`));}});}),new Promise((resolve, reject) => {geocoder.getLocation(city2.value, (status, result) => {if (status === 'complete' && result.geocodes.length) {resolve(result.geocodes[0].location);} else {reject(new Error(`無法獲取 ${city2.value} 的坐標`));}});})]);if (!AMap.GeometryUtil) {throw new Error('GeometryUtil 插件未加載成功');}const distance = AMap.GeometryUtil.distance([location1.lng, location1.lat],[location2.lng, location2.lat]);const distanceInKm = Math.round(distance / 1000);result.value = `${city1.value} 到 ${city2.value} 的直線距離約為: ${distanceInKm}公里`;} catch (err) {console.error('計算距離出錯:', err);error.value = err.message || '計算距離時出錯';} finally {loading.value = false;}};// 6. 組件掛載時初始化onMounted(() => {// 預加載高德地圖initAMap().catch(err => {console.error('初始化地圖失敗:', err);error.value = '初始化地圖失敗，請刷新重試';});});return {city1,city2,result,error,loading,calculateDistance};}
};
</script><style scoped>
.distance-calculator {max-width: 500px;margin: 0 auto;padding: 20px;font-family: Arial, sans-serif;
}.input-group {margin: 20px 0;display: flex;gap: 10px;
}input {flex: 1;padding: 8px 12px;border: 1px solid #ddd;border-radius: 4px;
}button {background-color: #4CAF50;color: white;padding: 10px 15px;border: none;border-radius: 4px;cursor: pointer;
}button:disabled {background-color: #cccccc;cursor: not-allowed;
}.result {margin-top: 20px;padding: 10px;background-color: #f8f9fa;border-radius: 4px;
}.error {margin-top: 20px;padding: 10px;color: #dc3545;background-color: #f8d7da;border-radius: 4px;
}
</style>