vue3 根据城市名称计算城市之间的距离

news2025/4/2 22:18:57

<template>
  <div class="distance-calculator">
    <h1>城市距离计算器</h1>

    <!-- 城市输入框 -->
    <div class="input-group">
      <input
          v-model="city1"
          placeholder="请输入第一个城市"
          @keyup.enter="calculateDistance"
      />
      <input
          v-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;
        }

        // 动态加载高德地图JS
        const script = document.createElement('script');
        script.src = `https://webapi.amap.com/maps?v=1.4.15&key=05d4c031a356cdffb8055c0d1532ced8`;  // API key
        
        script.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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2326040.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

html 列表循环滚动,动态初始化字段数据

html <div class"layui-row"><div class"layui-col-md4"><div class"boxall"><div class"alltitle">超时菜品排行</div><div class"marquee-container"><div class"scroll-…

QT基础:安装与简介

QT初级 1、简介1.1 安装1.2 设置1.3 在VS中配置Qt1.3 帮助文档 2、Qt项目2.1 创建项目2.1 项目文件2.2 Qt中的窗口类窗口显示 2.3 坐标体系2.4 内存回收 1、简介 QT是一个跨平台的C应用程序开发框架。几乎支持所有的平台, 可用于桌面程序开发以及嵌入式开发。 Qt是标准 C 的扩…

WEB安全-HTTPS

1 需求 结合Wireshark抓包实战&#xff0c;图文详解TCP三次握手及四次挥手原理&#xff08;附下载&#xff09; 结合Wireshark抓包分析&#xff0c;沉浸式体验HTTP请求的一次完整交互过程 https://mp.weixin.qq.com/s/f3LmUEtjIuLjkyjxJj7ebA 一文彻底了解DNS协议工作原理&…

【宇宙回响】从Canvas到MySQL:飞机大战的全栈交响曲【附演示视频与源码】

🌟 这是星际大战系列的第三篇,感谢一路以来支持和关注这个项目的每一位朋友! 💡 文章力求严谨,但难免有疏漏之处,欢迎各位朋友指出,让我们一起在交流中进步。 🎁 项目代码、文档和相关资源都可以免费获取,希望能帮助到更多对游戏开发感兴趣的朋友。 💌 如果您有任…

git push origin masterremote: [session-bd46a49f] The token username invalid

参考:如何把项目上传到Gitee&#xff08;保姆级教程&#xff09;_gitee上传项目-CSDN博客 1 新建仓库 username可以是登录账号的邮箱地址也可以是用户名 password可以是登录账号的密码也可以是私人令牌 2 创建分支 3 初始化 dev是你新建的分支 创建并切换分支 git init g…

基于MCU实现的电机转速精确控制方案:软件设计与实现

本文将详细介绍一篇基于微控制器&#xff08;MCU&#xff09;的电机转速精确控制的软件方案。通过采样PWM信号控制和ADC采样技术&#xff0c;结合PID闭环控制算法&#xff0c;实现了电机转速的高效、稳定调节。以下是软件方案流程图&#xff0c;下文将对其进行展开讲解。 原图太…

【模拟CMOS集成电路笔记】轨到轨运放(Rail to Rail)基础(附带实例:基于1:3电流镜的轨到轨输入运放)

【模拟CMOS集成电路笔记】轨到轨运放&#xff08;Rail to Rail&#xff09;基础 0前言1 简介1.1轨到轨输入级(1)互补差分对&#xff1a;(2)输入范围切换&#xff1a; 1.2轨到轨输出级(1)推挽输出&#xff1a;(1)输出级偏置&#xff1a; 2轨到轨输入运放2.1基于电流倍增实现恒定…

【零基础入门unity游戏开发——通用篇】图片相关设置

考虑到每个人基础可能不一样,且并不是所有人都有同时做2D、3D开发的需求,所以我把 【零基础入门unity游戏开发】 分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。 【C#篇】:主要讲解C#的基础语法,包括变量、数据类型、运算符、流程控制、面向对象等,适合没有编程基础的…

解决关于原生gmssl无法直接输出sm2私钥明文的问题

解决关于原生gmssl无法直接输出sm2私钥明文的问题 问题描述解决方法解决方法一解决方法二 问题描述 通过gmssl生成sm2公私钥对时&#xff0c;输出的是加密的sm2私钥&#xff0c;无法获取到SM2私钥明文。 解决方法 解决方法一 手动解密&#xff1a; 解决方法二 修改源码&…

基于 Qt / HTTP/JSON 的智能天气预报系统测试报告

目录 一、项目概述 1.1项目背景 1.2项目目标 二、功能需求 2.1 用户界面功能 2.2 后台功能 三、技术选择 3.1 开发框架与工具 3.2 第三方 API 四、UI设计 4.1界面展示 4.2stylesheet样式 五、代码实现 1.构造函数 2.网络请求响应处理函数 3.处理json数据 4.更新…

基于Real-Sim-Real循环框架的机器人策略迁移方法

编辑&#xff1a;陈萍萍的公主一点人工一点智能 基于Real-Sim-Real循环框架的机器人策略迁移方法本文通过严谨的理论推导和系统的实验验证&#xff0c;构建了一个具有普适性的sim-to-real迁移框架。https://mp.weixin.qq.com/s/cRRI2VYHYQUUhHhP3bw4lA 01 摘要 本文提出的Rea…

Spring Boot 集成实战:AI 工具如何自动生成完整微服务模块

在数字化转型的浪潮中&#xff0c;开发效率和质量是企业竞争力的关键要素。飞算 JavaAI 作为一款创新的 AI 工具&#xff0c;能在 Spring Boot 开发中&#xff0c;自动生成完整微服务模块&#xff0c;极大提升开发效率。下面&#xff0c;我们就详细介绍如何借助飞算 JavaAI&…

Java高频面试之并发编程-01

hello啊&#xff0c;各位观众姥爷们&#xff01;&#xff01;&#xff01;本baby今天来报道了&#xff01;哈哈哈哈哈嗝&#x1f436; 面试官&#xff1a;并行跟并发有什么区别&#xff1f; 并发 vs 并行&#xff1a;核心区别与场景 1. 定义对比 维度并发&#xff08;Concu…

AI 驱动的安全分析的价值是什么?

作者&#xff1a;来自 Elastic Riya Juneja, Alyssa VanNice 与 Enterprise Strategy Group 一起量化经济影响 安全行业十分复杂&#xff0c;变化速度极快。攻击面、利益相关者需求、对手战术以及你使用的工具都在不断演变&#xff0c;导致许多安全团队不确定自己是否已做好准备…

AWE 2025:当AI科技遇见智能家居

3月20日&#xff0c;以“AI科技、AI生活”为主题的AWE2025&#xff08;中国家电及消费电子博览会&#xff09;在上海新国际博览中心开幕。作为全球家电行业风向标&#xff0c;本届展会最大的亮点莫过于健康理念在家电领域的全面渗透。从食材保鲜到空气净化&#xff0c;从衣物清…

win10之mysql server 8.0.41安装

一 mysql server 下载 官网下载地址页面 https://dev.mysql.com/downloads/mysql/二 免装版使用步骤 1 解压 下载完成后,解压文件夹,如下所示: 2 执行安装命令 D:\soft\mysql\mysql-8.0.41-winx64\mysql-8.0.41-winx64\bin>mysqld --install Service successfully in…

蓝桥杯专项复习——二分

目录 二分查找、二分答案基础知识 二分查找模版 【模版题】数的范围 借教室 二分查找、二分答案基础知识 二分查找模版 【模版题】数的范围 输入样例 6 3 1 2 2 3 3 4 3 4 5输出样例 3 4 5 5 -1 -1 思路&#xff1a; 对应两个模版&#xff0c;起始位置是对应第一个模版…

oracle中java类的使用

方式一&#xff1a; 编写一个简单的java类 vi OracleJavaDemo.java public class OracleJavaDemo { public static String processData(String input) { return "Processed: " input; } } 编译 javac OracleJavaDemo.java 生成OracleJavaDemo…

高并发内存池(一):项目介绍和Thread Cache实现

前言&#xff1a;本文将要介绍的高并发内存池&#xff0c;它的原型是Google的⼀个开源项⽬tcmalloc&#xff0c;全称Thread-Caching Malloc&#xff0c;近一个月我将以学习为目的来模拟实现一个精简版的高并发内存池&#xff0c;并对核心技术分块进行精细剖析&#xff0c;分享在…

MySQL与Redis数据一致性保障方案详解

前言 在现代分布式系统中&#xff0c;MySQL和Redis的结合使用非常普遍。MySQL作为关系型数据库负责持久化存储&#xff0c;而Redis则作为高性能缓存层提升系统的响应速度。然而&#xff0c;在这种架构下&#xff0c;如何保证MySQL与Redis之间的数据一致性是一个重要的挑战。本…