js中高德地图如何自身所在城市

直接上代码

<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>逆地理编码(经纬度->地址)</title><meta name="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"><script src="js/jquery-3.6.3.js"></script><link rel="stylesheet" href="css/xinxigai.css"><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=2ba918f5c295c0b85be0322ccf084de6"></script><style>/* 地图 */.map {margin-top: 5%;width: 100%;height: 30vh;}#container {width: 100%;height: 30vh;}/* 信息显示框 */#coordinate{/width: 39%;height: 50px;}</style>
</head>
<body><!-- 地址 --><div class="contacte"><p>地址:</p><div class="work"><input type="text" id="contacte" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"  placeholder="请输入内容" value=""></div></div><div class="map" style="position: relative;"><div id="container"></div></div><script>// 地图let position = '';let leng = '35.302616';let lang = '113.883991';//初始化地图时,若center属性缺省,地图默认定位到用户所在城市的中心,function ad() {var map = new AMap.Map('container', {resizeEnable: true, //是否监控地图容器尺寸变化zoom: 14, //初始化地图层级center: [lang, leng] //初始化地图中心点});}ad();// 初始化地图let map = new AMap.Map('container', {resizeEnable: true,zoom: 14,center: [lang, leng]});// // 点击地图事件map.on('click', function(e) {console.log(666);let position = e.lnglat; // 获取点击位置的经纬度坐标console.log(position.lng, position.lat); // 显示经纬度坐标// 这里你可以将经纬度坐标显示在页面上的指定位置,比如一个div容器中document.getElementById('contacte').innerHTML = '经度:' + position.lng + ', 纬度:' + position.lat;});var backgroundColor = $('.toggle-switch-handle').css('background-color');console.log(backgroundColor);// 切换事件获取状态let asd = [];let asf = [];leng = '35.281454'lang = '113.978255'asd = ['35.281454']asf = ['113.978255']sessionStorage.setItem('zuo', asd)sessionStorage.setItem('biao', asf)ad()map = new AMap.Map('container', {resizeEnable: true,zoom: 14,center: [lang, leng]});// 调用高德地图的逆地理编码服务AMap.service('AMap.Geocoder', function() {var geocoder = new AMap.Geocoder({// 结果返回参数city: "0371", // 城市,可选,默认是全国radius: 1000 // 范围,默认是500});// 将获取到的经纬度坐标作为参数传递给逆地理编码服务$.ajax({// dataType: 'json', //服务器返回json格式数据type: 'GET', //HTTP请求类型timeout: 10000, //超时时间设置为10秒;url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',data:{key:'e67e44d2b82a84aabe5cb87b7235188a',// location:position.lng+','+position.lat// '113.978441 + ',' + 35.28117',location:'113.978441,35.28117'},success: function(res) {let str=res.regeocode.formatted_address;//省市区//res.regeocode.addressComponent.district;单独到区console.log(res);$('#contacte').val(str)laction=str;console.log(laction);},error: function(res) {}});});</script>
</body>
</html>

这是效果图跟自身定位获取城市

提示这里调用了逆地理编码一定要先因这个链接  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key值">
        </script>

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

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

相关文章

Linux中的新建用户、切换用户

目录 一、Linux系统中有哪些用户 二、新建普通用户 三、root账号与普通账号的切换 一、Linux系统中有哪些用户 1.root 超级管理员&#xff08;不受权限约束&#xff09; 2.其他用户 普通用户&#xff08;受到权限约束&#xff09; 二、新建普通用户 创建新用户 sudo user…

如何删除Windows密码,看这篇文章就够了

删除Windows帐户的密码一点也不困难。删除密码后,当计算机启动时,你就不再需要登录到Windows。 在你删除密码后,家里或办公室里的任何人都可以完全访问你电脑上的所有内容,所以这样做并不是一件非常注重安全的事情。 ​注意:如果你忘记了密码,那么你将无法使用下面的方…

Oracle 12CR2 RAC部署翻车,bug避坑经历

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…

【AI】ChatGPT和文心一言那个更好用

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读文章&#xff01; 此篇是【话题达人】序列文章&#xff0c;这一次的话题是《自然语言处理的发展》 文章将以博主的角度进行讲述&#xff0c;理解和水平有限&#xff0c;不足之处&#xff0c;望指正。 目录 背景自我介绍面试题…

git本地分支的合并

目录 第一章、本地分支的切换测试1.1&#xff09;切换之前的master分支下文件内容1.2&#xff09;切换到develop分支后修改文件1.3&#xff09;切回master分支出现报错&#xff1a;1.4&#xff09;报错分析 第二章、解决方式2.1&#xff09;方式1&#xff1a;commit2.2&#xf…

Spring Security的使用条件

Spring Security要求使用Java 8或更高版本的运行时环境。 由于Spring Security旨在以自包含的方式运行&#xff0c;因此您无需在Java运行时环境中放置任何特殊的配置文件。特别是&#xff0c;您无需配置特殊的Java认证和授权服务&#xff08;JAAS&#xff09;策略文件&#xf…

“盲盒+互联网”模式下的盲盒小程序带来了哪些机遇?

近几年&#xff0c;盲盒逐渐兴起&#xff0c;深受大众的喜爱。盲盒中拥有各类随机商品&#xff0c;包括玩偶手办等&#xff0c;让消费者无法自拨。盲盒拥有神秘感和不确定性&#xff0c;消费者在购买前并不知道盲盒中是什么商品&#xff0c;因此具有较大的惊喜感&#xff0c;能…

绑定class,条件渲染,列表过滤,列表排序

目录​​​​​​​ 绑定class 条件渲染 列表过滤 列表排序 绑定class <div class"normal" :class"mood" click"changename">111{{name}}</div><div class"normal" :class"arr">111{{name}}</div…

mysql第五次作业

一、 学生表&#xff1a;Student (Sno, Sname, Ssex , Sage, Sdept) 学号&#xff0c;姓名&#xff0c;性别&#xff0c;年龄&#xff0c;所在系 Sno为主键 课程表&#xff1a;Course (Cno, Cname,) 课程号&#xff0c;课程名 Cno为主键 学生选课表&#xff1a;SC (Sno, Cno, …

node.js(expree.js )模拟手机验证码功能及登录功能

dbconfig.js const mysql require(mysql) module.exports {// 数据库配置config: {host: localhost, // 连接地址port: 3306, //端口号user: root, //用户名password: wei630229, //密码database: exapp2, //数据库名}, // 连接数据库&#xff0c;使用mysql的连接池连接方式…

MetaGPT-打卡-day2,MetaGPT框架组件学习

文章目录 Agent组件实现一个单动作的Agent实现一个多动作的Agent技术文档生成助手其他尝试 今天是第二天的打卡~昨天是关于一些概念的大杂烩&#xff0c;今天的话&#xff0c;就来到了Hello World环节。 从单个Agnet到多个Agent&#xff0c;再到组合更复杂的工作流来解决问题。…

【MCAL】SPI模块详解

目录 前言 正文 1. SPI通信协议介绍 2. AUTOSAR架构下的SPI模块 2.1 SPI模块介绍 2.2 关键概念理解 2.3 SPI模块详细设计 2.3.1 SPI可扩展功能 2.3.2 SPI Channel Job Sequence 2.2.3 通道缓存功能 2.2.4 同步和异步调用 2.4 SPI模块重要数据类型 2.4.1 Spi_Confi…

flink学习之水位线

什么是水位线 在事件时间语义下&#xff0c;我们不依赖系统时间&#xff0c;而是基于数据自带的时间戳去定义了一个时钟&#xff0c; 用来表示当前时间的进展。于是每个并行子任务都会有一个自己的逻辑时钟&#xff0c;它的前进是靠数 据的时间戳来驱动的。 我们可以把时钟也以…

matlab多元线性回归

1.matlab多元回归示例如下&#xff1a; 解决问题&#xff1a;油价预测 方法&#xff1a;多元线性回归 实现&#xff1a;matlab regress()函数 技巧&#xff1a;通过增加X1^2&#xff0c;X2^2&#xff0c;或者X1*X2等构造的特征项&#xff0c;可以提高回归模型的拟合准确度&…

基于SpringBoot Vue自习室管理系统

大家好✌&#xff01;我是Dwzun。很高兴你能来阅读我&#xff0c;我会陆续更新Java后端、前端、数据库、项目案例等相关知识点总结&#xff0c;还为大家分享优质的实战项目&#xff0c;本人在Java项目开发领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#x…

Mybatis面试题(四)

MyBatis 面试题 26、Mapper 编写有哪几种方式&#xff1f; 第一种&#xff1a;接口实现类继承 SqlSessionDaoSupport&#xff1a;使用此种方法需要编写mapper 接口&#xff0c;mapper 接口实现类、mapper.xml 文件。 1、在 sqlMapConfig.xml 中配置 mapper.xml 的位置 <m…

Bit.Store 加密卡集成主流 BRC20 ,助力 BTC 生态 Token 的流动性与消费

“Bit.Store 首创性的将包括 ORDI、SATS、以及 RATS 在内的主流 BRC20 资产集成到其加密卡支付中&#xff0c;通过以其推出的加密银行卡为媒介&#xff0c;助力 BTC 生态 Token 的流动性与消费。” 比特币网络在被设计之初&#xff0c;就是以一种去中心化、点对点的现金系统为定…

R2DBC-响应式数据库

简单查询 基于全异步,响应式,消息驱动 用法: 1.导入驱动:导入连接池(r2dbc-pool),导入驱动(r2dbc-mysql) 2. 使用驱动提供的api操作 pom.xml <properties><r2dbc-mysql.version>1.0.5</r2dbc-mysql.version> </properties><dependencies><d…

黑马 Javaweb - MySQL 精华篇

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 知…

市场监管总局发布区块链和分布式记账技术6项标准,中创积极推动区块链产业发展!

近日&#xff0c;市场监管总局&#xff08;国家标准委&#xff09;批准发布一批重要国家标准&#xff0c;涉及生产生活、绿色可持续等多个领域&#xff0c;这些标准将在引领产业发展、促进绿色转型、助力对外贸易、推动城乡建设、提升生活品质等方面发挥重要作用。 其中一项标…