当前位置: 首页 > news >正文

uniapp 展示地图,并获取当前位置信息(精确位置)

使用uniapp 提供的map标签 

	  <map :key='mapIndex'  class="container" :latitude="latitude" :longitude="longitude"  ></map>

页面初始化的时候,获取当前的位置信息

		created() {let that = thisuni.getLocation({type: 'gcj02',// 火星坐标系isHighAccuracy:true,geocode:true,success: function (res) {that.latitude = res.latitudethat.longitude  = res.longitude// 通过经纬度获取位置信息that.locationName(res.latitude, res.longitude)},fail:function(res){console.log()uni.showToast({title: '获取位置信息失败',duration: 2000,icon:'error'});}});},

根据获取到的经纬度 获取 位置信息(此处使用的是 高德地图的位置服务,通过高德地图的逆地理位置解析,获取定位到的经纬度的 位置信息)

			// 定义解析位置信息的方法locationName(latitude, longitude) {let that = thislet mapKey = '1d8xxxxxxxxxxxxxxxx'; // 构造URLvar url = 'https://restapi.amap.com/v3/geocode/regeo?key=' + mapKey + '&location=' + longitude + ',' + latitude;// 使用fetch发送请求fetch(url).then(response =>  response.json()).then(data => {if (data.status === '1') {// 获取到的地址信息var address = data.regeocode.formatted_address;that.nowAddressInfo = address} else {console.error('Error: ' + data.info);}}).catch(error => console.error('Error:', error));},

高德地图获取key

相关文章:

  • 《web应用技术》第十一次作业
  • Postman接口测试工具详解
  • 【逻辑回归】和【线性回归】的区别和联系-九五小庞
  • 【git使用四】git分支理解与操作(详解)
  • 快手爬票概述
  • node设置镜像源详细教程
  • SpringMVC的工作流程
  • 编程App软件优化是什么
  • 【知识点】std::thread::detach std::lock_guard std::unique_lock
  • 【CT】LeetCode手撕—121. 买卖股票的最佳时机
  • 在不使用js在情况下只用css实现瀑布流效果
  • 速盾:cdn加速怎么计费?
  • 二刷算法训练营Day29 | 回溯算法(5/6)
  • SortTable.js + vxe-table 实现多条批量排序
  • 第 4 章:从 Spring Framework 到 Spring Boot
  • ----------
  • Angular4 模板式表单用法以及验证
  • CentOS7 安装JDK
  • ERLANG 网工修炼笔记 ---- UDP
  • JavaScript中的对象个人分享
  • Js基础知识(一) - 变量
  • laravel5.5 视图共享数据
  • MySQL数据库运维之数据恢复
  • PHP面试之三:MySQL数据库
  • Python进阶细节
  • React-redux的原理以及使用
  • redis学习笔记(三):列表、集合、有序集合
  • Redis在Web项目中的应用与实践
  • Vue全家桶实现一个Web App
  • vue--为什么data属性必须是一个函数
  • windows下如何用phpstorm同步测试服务器
  • 阿里云爬虫风险管理产品商业化,为云端流量保驾护航
  • 不上全站https的网站你们就等着被恶心死吧
  • 翻译:Hystrix - How To Use
  • 高程读书笔记 第六章 面向对象程序设计
  • 前端性能优化--懒加载和预加载
  • 前端之Sass/Scss实战笔记
  • 使用docker-compose进行多节点部署
  • 【运维趟坑回忆录】vpc迁移 - 吃螃蟹之路
  • 3月27日云栖精选夜读 | 从 “城市大脑”实践,瞭望未来城市源起 ...
  • 阿里云ACE认证学习知识点梳理
  • ​​​​​​​GitLab 之 GitLab-Runner 安装,配置与问题汇总
  • ​学习一下,什么是预包装食品?​
  • #162 (Div. 2)
  • #Spring-boot高级
  • (10)工业界推荐系统-小红书推荐场景及内部实践【排序模型的特征】
  • (笔试题)分解质因式
  • (附源码)php投票系统 毕业设计 121500
  • (转)C#调用WebService 基础
  • (转)linux下的时间函数使用
  • .NET Core 版本不支持的问题
  • .NET Core 和 .NET Framework 中的 MEF2
  • .NET WebClient 类下载部分文件会错误?可能是解压缩的锅
  • .NET 中让 Task 支持带超时的异步等待
  • .NET/C# 异常处理:写一个空的 try 块代码,而把重要代码写到 finally 中(Constrained Execution Regions)