【使用高德开放平台API和js的Ajax代码实现定位并获得城市的天气情况】

news2025/1/21 15:24:04

使用高德开放平台API和js的Ajax代码实现定位并获得城市的天气情况

1、注册高德开放平台账号,免费获得Web服务API应用key

高德开放平台Web服务API

按照API点击申请KEY

在这里插入图片描述

登录后进入应用管理

在这里插入图片描述

新建应用(随意起名)

在这里插入图片描述

然后添加key提交即可

在这里插入图片描述

然后就可以看到你申请的key

在这里插入图片描述

2、编写js的Ajax代码,实现请求服务得到定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>
  <script>
    function getLocation() {
      axios
        .get("https://restapi.amap.com/v3/ip", {
          params: {
            key: "e8e0bb95c623fd363f68ca5e3045b5b2",
          },
        })
        .then((data) => {
          console.log(data.data);
          const span = document.getElementById("city");
          span.innerText = data.data.city;
        });
    }
  </script>
  <body>
    <button onclick="getLocation()">定位</button><span id="city">未知</span>
  </body>
</html>

实现效果如下:

点击定位按钮后,得到定位地址
在这里插入图片描述

3、根据所获得地址定位获得当前城市的天气情况

在这里插入图片描述

根据API可知,只需要key和地址就可以获得给定地址的天气情况

4、编写对应的Ajax代码实现得到当前城市天气情况

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

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

相关文章

开发步骤、Java开发工具

目录 一、开发步骤 二、Java开发工具 JDK安装完毕&#xff0c;我们就可以开始开发第一个Java程序了&#xff0c;习惯性的成为HelloWorld。 一、开发步骤 Java程序开发三步骤&#xff1a;编写、编译、运行 -将Java代码编写到扩展名为.java的源文件中 -通过javac.exe命令对…

【办公软件】Win10/Win11复制粘贴必须刷新才能显示

更换了新的一台电脑&#xff0c;但是发现新建文件夹或是复制粘贴文件时&#xff0c;不管是在桌面还是在其他磁盘中都需要右击刷新一下才显示。让人很郁闷&#xff0c;比如新建一个文件夹不显示以为没有新建成功&#xff0c;导致重复建了好几个。 如何解决&#xff1f; 使用Wi…

链路追踪详解(三):分布式链路追踪标准的演进

目录 Google Dapper Twitter Zipkin Uber Jaeger OpenTracing 和 OpenCensus OpenTelemetry 小结 分布式链路追踪是现代云计算和微服务架构中一个关键技术&#xff0c;可以让开发者和运维团队理解和监控服务请求在复杂系统中的完整流转路径。分布式链路追踪技术的发展经历…

岚图追光PHEV 25.28万元起售,开卷混动豪华轿车

作者&#xff5c;Amy 编辑&#xff5c;德新 12月5日晚&#xff0c;2023岚图科技日上&#xff0c;岚图汽车正式发布了其新一代SOA电子电气架构天元架构&#xff0c;并宣布了以“新行政电动旗舰”为定位的岚图追光PHEV正式上市。 岚图追光PHEV是岚图汽车旗下首款电混轿车&#x…

【LeetCode刷题】-- 79.单词搜索

79.单词搜索 方法&#xff1a;使用回溯 使用dfs函数表示判断以网格的(i.j)位置出发&#xff0c;能否搜索到word(k)&#xff0c;其中word(k)表示字符串word从第k个字符开始的后缀子串&#xff0c;如果能搜索到&#xff0c;返回true,反之返回false 如果board[i][j]≠word[k]&am…

【S32K3环境搭建】-0.3-S32DS安装实时驱动RTD(Real-Time Driver)

目录 1 什么是“实时驱动RTD(Real-Time Driver)” 2 安装“实时驱动RTD(Real-Time Driver)” 2.1 方法一&#xff1a;通过S32DS Extensions and Updates安装“实时驱动RTD(Real-Time Driver)” 2.2 方法二&#xff1a;通过Install New Software…安装“实时驱动RTD(Real-Ti…

什么是LIMS实验室信息管理系统 LIMS系统功能介绍

实验室信息管理系统&#xff0c;也称为 LIMS系统&#xff0c;是一种软件解决方案&#xff0c;它通过自动化手动流程来支持现代实验室操作。因此&#xff0c;生命科学专业人员可以实时访问准确无误的信息。该软件使用户能够更有效地管理样本、分析相关数据并根据相关数据采取行动…

高端角雷达参考设计(TI文档)

说明 该参考设计使用了 AWR2944 评估模块 (EVM)&#xff0c;为角雷达应用满足 NCAP R79 安全要求奠定了基础。该设计使用户能够估算和跟踪器件视场内最远 200m 的物体位置&#xff08;在方位平面中&#xff09;和速度。该应用主要面向提供多种功能&#xff08;如盲点检测、前侧…

《Java 并发编程艺术》笔记(上)

如何减少上下文切换 减少上下文切换的方法有无锁并发编程、CAS算法、使用最少线程和使用协程。 无锁并发编程&#xff1a;多线程竞争锁时&#xff0c;会引起上下文切换&#xff0c;所以多线程处理数据时&#xff0c;可以用一些办法来避免使用锁。如将数据的 ID 按照 Hash 算法…

用modelbox server启动流程图,暴露Restful接口

背景 假设你已经搭建了modelbox开发容器&#xff0c;能够使用webUI构建流程图。如果没有请参考昇腾npu上构建modelbox webUI开发容器教程。 现在&#xff0c;本文会说明&#xff0c;如何在终端用命令的方式将流程图暴露为服务&#xff0c;并能够在本地用postman访问。 本文参…

「智慧城市」这一概念科学吗?还是炒作?

智慧城市是一个综合性的概念&#xff0c;它利用信息技术和创新概念&#xff0c;将城市的各个系统和服务集成起来&#xff0c;以提升城市运行效率、优化城市管理和服务&#xff0c;改善市民的生活质量。 具体来说&#xff0c;智慧城市涵盖了许多领域&#xff0c;包括城市规划、建…

Python中读写CSV文件的深入探讨

目录 一、引言 二、如何读取CSV文件 三、如何写入CSV文件 四、处理大型CSV文件 五、总结 一、引言 CSV&#xff08;Comma-Separated Values&#xff09;文件是一种常见的逗号分隔值格式的文件&#xff0c;常用于存储和传输数据。在Python中&#xff0c;我们可以使用内置的…

WindowsServer服务器系列:定时备份 MySQL

一、编写脚本 echo 取日期、时间变量值 set yy%date:~0,4% set mm%date:~5,2% set dd%date:~8,2% if /i %time:~0,2% lss 10 set hh0%time:~1,1% if /i %time:~0,2% geq 10 set hh%time:~0,2% set mn%time:~3,2% set ss%time:~6,2% set date%yy%%mm%%dd% set time%hh%%mn%%ss…

GIT GUI使用

文章目录 一、新建本地仓库二、推送&#xff08;push&#xff09; 一、新建本地仓库 在空白处右键&#xff0c;找到GIT GUI here&#xff0c; 如果没有仓库&#xff0c;出现的是这样的&#xff1a; 如果有仓库&#xff0c;在本地仓库里打开就是这样的&#xff1a; 新建本地…

外包干了6个月,技术退步明显.......

先说一下自己的情况&#xff0c;大专生&#xff0c;18年通过校招进入武汉某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落! 而我已经在一个企业干了四年的功能测…

C语言面试之旅:掌握基础,探索深度(面试实战之单片机——IO)

梦想和自由一样&#xff0c;都有代价&#xff0c;但都值得。 ----小新 引言 单片机是一种微控制器&#xff0c;它包含一个处理器、存储器、定时器和I/O端口等。I/O端口是单片机与外部设备进行通信的接口。通过I/O端口&#xff0c;外部设备可以输入和输出数据到单片机中。 在单…

【数据结构】——二叉树特点

前言&#xff1a;我们前面已经了解了二叉树的一些概念&#xff0c;那么我们今天就来了解下二叉树的遍历实现和一些性质。 二叉树的遍历方式有三种&#xff1a;前序&#xff0c;中序&#xff0c;后序。 前序&#xff1a;先根节点&#xff0c;再左子树&#xff0c;最后右子树。 中…

SpringSecurity工作原理(一)

实现功能就是继承这几个对应功能的类。 大概工作流程 Spring Security 的过滤器&#xff08;Filters&#xff09;和拦截器&#xff08;Interceptors&#xff09;是 Spring Security 框架中用于保护 web 应用安全的重要组件。它们在处理 HTTP 请求时扮演不同的角色&#xff0c…

Linux自启服务提示:systemd[1]: *.service: main process exited, code=exited, status=1问题

这两天一直在沉迷于配脚本&#xff0c;由于服务器很多&#xff0c;所以我都是从一台服务器上配置好的脚本直接copy到另一台服务器&#xff0c;按说完全一样的脚本一样的操作&#xff0c;那么应该是一样的执行结果 but, Gul’dan&#xff0c;代…我重启服务器后服务并没有正常启…

k8s官方镜像代理加速

背景 大家可能在云原生领域需要部署周边的一些生态组件时&#xff0c;在国内遇到无法正常拉取镜像&#xff0c;显得就有点苦恼&#xff0c;不过没关系&#xff0c;常见的${{ registry_name }} 例如 “gcr.io”&#xff0c;“registry.k8s.io” Failed to pull image “registry…