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

【uni-app】申请高德地图key,封装map.js,实现H5、iOS、Android通过getlocation获取地图定位信息

文章目录

  • map组件基础使用
  • 封装map.js,实现定位
    • 1、使用第三方地图:高德,申请对应平台key
      • 1、申请H5 key
      • 2、申请微信小程序 key
      • 3、申请android key
          • 查看证书详情,可以看到SHA1
          • 查看/设置Android包名
      • 4、申请ios key
    • 2、封装map
      • 1、lib/map.js
      • 2、main.js中全局引用:
      • 3、使用

map组件基础使用

<template><view class="contact"><image class="img" :src="formData.headImg"></image><view class="info"><view @click="callPhone">联系电话:{{formData.phone}} ( 点击拨打 )</view><view>地址:{{formData.addr}}</view></view><map class="map" v-if="showMap" :longitude="longitude" :scale="scale" :latitude="latitude" :markers="markers"></map></view>
</template><script>export default {data() {return {showMap: false,formData:{headImg:'http://www.itcast.cn/2018czydz/images/gywmban.jpg',phone: '(0571)28828888',addr:'浙江省杭州市滨江区江南大道3588号'},longitude: 120.172341,latitude: 30.19159,scale: 13, // 缩放级别,取值范围为3-20, 默认16markers:[ // 标记点用于在地图上显示标记的位置,支持多个{longitude: 120.172341,latitude: 30.19159,iconPath: '../../static/logo.png',width: 20,height: 20,title:'ohh',// 点击时显示,callout存在时将被忽略label:{ content:'呀哈哈'},callout:{content:`kkkk\r\nphds`}}]}},mounted() {this.showMap = true;},methods: {phone() {uni.makePhoneCall({phoneNumber: this.formData.phone})}}}
</script><style lang="scss">
.contact{.img{width: 750rpx;height: 320rpx;}.info{padding: 10rpx 20rpx;font-size: 30rpx;view{line-height: 80rpx;border-bottom: 1px solid #eee;}}.map{width: 750rpx;height: 750rpx;}
}
</style>

封装map.js,实现定位

1、使用第三方地图:高德,申请对应平台key

注:高德地图web js api:https://lbs.amap.com/api/javascript-api/guide/abc/prepare

1、申请H5 key

1、登录高德开放平台
(https://console.amap.com/dev),没有账号需要先注册开发者账号

2、创建应用:输入名称,选择应用类型在这里插入图片描述
在这里插入图片描述
3、应用右侧,点击添加key,添加h5 web端(JS API),h5需申请这个key,否则活报key无效或不匹配
在这里插入图片描述
4、获取key值后浏览器访问该链接,
记得替换key值: https://webapi.amap.com/maps?v=1.4.15&key=申请的key值,项目中创建map-h5.js, 将访问到的js复制并粘贴到map-h5.js,这里我存放的路径是utils/maps-h5.js

5、如果不做map封装,可以不执行上一步,只需把申请到的web端的key和安全秘钥配置到项目的manifest.json,即可使用高德地图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
此时使用api获取当前定位,使用Google浏览器访问时,并不会触发获取当前位置api,而H5 端获取定位信息,要求部署在 https 服务上,查看配置是已经使用https协议
原因是:国内使用Google浏览器访问极有可能被墙,所以可以使用其他浏览器进行测试或者科学上网。

接口文档:https://uniapp.dcloud.net.cn/api/location/location.html#getlocation
在这里插入图片描述

配置使用https协议
在这里插入图片描述

通过uni.getLocation获取当前定位信息时,成功回调函数中会返回当前经纬度等信息,如果想获取当前省市区信息,可以设置参数 geocode 为 true,但该属性仅APP端支持,H5则需要再通过第三方(高德)逆地理编码解析出地址信息
逆地理编码需要web服务的key作为参数,所以需要再申请web服务的key

在这里插入图片描述

// 转地址
turnAdrr(longs, lat) {// 高德逆地理变码 https://lbs.amap.com/api/webservice/guide/api/georegeo/let _key = '22865bd225e8ce6a8dc04780e9d650c1';//高德API key类型:web服务uni.request({method: 'GET',url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',data: {key: _key,location: `${longs},${lat}`,output: 'JSON'},success: async (res) => {console.log(res)const resData = res.datathis.formData.addr = resData.regeocode.formatted_addressthis.latitude = latthis.longitude = longsthis.markers[0].latitude = latthis.markers[0].longitude = longsthis.showMap = true;},fail: r => {console.log(r);}});
},

以上通过逆地理编码就可以得到当前定位的地理信息
在这里插入图片描述

此时动态获取到当前定位信息,就可以把数据动态绑定到map组件中
到此H5使用第三方地图已完成。

2、申请微信小程序 key

1、申请微信小程序key
在这里插入图片描述

2、下载小程序的js文件链接:https://lbs.amap.com/api/wx/download

3、下载完后将amap-wx.js文件解压到项目即可(主要为了封装map全局调用)

3、申请android key

1、申请Android证书
在uni-app官方文档https://uniapp.dcloud.net.cn/左侧菜单,点击uniClound web端控制台https://unicloud.dcloud.net.cn/,登录开发者账号,然后点击账号管理,左侧菜单:应用管理-我的应用,找到需要创建Android正式的项目

点击项目名称-Android云端正式,点击创建证书===》点击确定,等待几分钟,正式就创建好了。

查看证书详情,可以看到SHA1

在这里插入图片描述

查看/设置Android包名

在这里插入图片描述
在这里插入图片描述

2、获得SHA1安全码和包名之后,高德开放平台,添加Android key,并输入SHA1 和包名,点击确认即可生成key。
在这里插入图片描述

3、复制Android key 添加到地图配置中。如果不打算申请ios,随便填一个或者都填Android的key。
在这里插入图片描述
在这里插入图片描述

4、申请ios key

ios 申请相对有点麻烦,主要是需要登录apple 开发者平台https://developer.apple.com/注册开发者账号,然后申请ios正式,生成bundle id。
具体申请可以参考:http://news.558idc.com/288029.html
这里仅为了测试,就填了dcound提供的bundle id: io.dclound.HBuilder
在这里插入图片描述
点击提交,生成ios平台key,复制 key 添加到地图配置中
在这里插入图片描述

2、封装map

1、lib/map.js

以上各平台key申请完成之后,新建lib/map.js进行封装

//h5 要调用的js文件
// #ifdef H5
import amap from '@/utils/map-h5.js';
// #endif
//微信小程序要调用的js文件
// #ifdef MP  
import amap from '@/utils/map-wx.js';
// #endif
//获取位置信息
const getlocation = (opt) => {return new Promise((resolve, reject) => {//h5开始// #ifdef H5AMap.plugin('AMap.Geolocation', function() {uni.showLoading({title: '系统正在定位'});var geolocation = new AMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位,默认:truetimeout: 10000, //超过10秒后停止定位,默认:5sbuttonPosition: 'RB', //定位按钮的停靠位置buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点});// console.log(geolocation,'geolocation')geolocation.getCurrentPosition(function(status, result) {console.log(status,'status')if (status == 'complete') {//这个地方的result,可能会出现报错:获得地理定位时间。得到ipLocation成功。获取地址失败,请检查您的密钥或网络。//可能是密匙申请错了,重新申请密匙,生成maps.js文件。// console.log(result)uni.hideLoading();resolve(result)} else {uni.hideLoading();uni.showToast({title: '定位失败',});reject(result)}});});// #endif//h5结束//app开始// #ifdef APP-PLUSuni.showLoading({title: '获取信息中'});uni.getLocation({// map组件默认为国测局坐标gcj02,调用 uni.getLocation返回结果传递给组件时,需指定 type 为 gcj02 type: 'gcj02',geocode: true,success: function(data) {resolve(data)},fail: function(err) {reject(err)},complete() {uni.hideLoading();}})// #endif//app结束///小程序开始// #ifdef MPvar amapPlugin = new amap.AMapWX({key: 'e7bdd77a10ffca3092c48032d1f74ace'  //此处为高德平台申请的微信小程序的key});uni.showLoading({title: '获取信息中'});amapPlugin.getRegeo({success: function(data) {resolve(data)},fail: function(err) {reject(err)},complete: function() {uni.hideLoading();}});// #endif//小程序结束})
};
export default {getlocation: getlocation
}

2、main.js中全局引用:

import map from 'common/map.js'
Vue.prototype.$map = map;

3、使用

<template><view class="contact"><image class="img" :src="formData.headImg"></image><view class="info"><view @click="callPhone">联系电话:{{formData.phone}} ( 点击拨打 )</view><view>地址:{{formData.addr}}</view></view><map class="map" v-if="showMap" :longitude="longitude" :scale="scale" :latitude="latitude" :markers="markers"></map></view>
</template>
<script>export default {data() {return {showMap:false,formData:{headImg:'http://www.itcast.cn/2018czydz/images/gywmban.jpg',phone: '(0571)28828888',addr:''},longitude: null,latitude: null,scale: 13, // 缩放级别,取值范围为3-20, 默认16markers:[ // 标记点用于在地图上显示标记的位置,支持多个{longitude: null,latitude: null,iconPath: '../../static/logo.png',width: 20,height: 20,title:'ohh',// 点击时显示,callout存在时将被忽略label:{ content:'呀哈哈'},callout:{content:`kkkk\r\nphds`}}]}},created() {this.init();},methods: {init(){this.$map.getlocation().then(res => {console.log(res)// #ifdef APP-PLUSthis.formData.addr = res.address.province+res.address.city+res.address.district+res.address.street+res.address.streetNum+res.address.poiName;this.latitude = res.latitudethis.longitude = res.longitudethis.markers[0].latitude = res.latitudethis.markers[0].longitude = res.longitudethis.showMap = true;// #endif// #ifdef H5this.turnAdrr(res.longitude,res.latitude)// #endif}).catch(err => {console.log(err)})},// 转地址turnAdrr(longs, lat) {// 高德逆地理变码 https://lbs.amap.com/api/webservice/guide/api/georegeo/let _key = '22865bd225e8ce6a8dc04780e9d650c1';//高德API key类型:web服务uni.request({method: 'GET',url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',data: {key: _key,location: `${longs},${lat}`,output: 'JSON'},success: async (res) => {console.log(res)const resData = res.datathis.formData.addr = resData.regeocode.formatted_addressthis.latitude = latthis.longitude = longsthis.markers[0].latitude = latthis.markers[0].longitude = longsthis.showMap = true;},fail: r => {console.log(r);}});},callPhone() {uni.makePhoneCall({phoneNumber: this.formData.phone})}}}
</script><style lang="scss">
.contact{.img{width: 750rpx;height: 320rpx;}.info{padding: 10rpx 20rpx;font-size: 30rpx;view{line-height: 80rpx;border-bottom: 1px solid #eee;}}.map{width: 750rpx;height: 750rpx;}
}
</style>

注意:H5需要开启使用https协议,调试时不要使用:Chrome、火狐、安卓原生WebView等,会报错:Get geolocation timeout.Get ipLocation failed.

报错是定位超时,由于JSAPI 使用的是浏览器提供的定位服务,所以定位的准确度和成功率都会对浏览器有很大的依赖。由于Chrome在国内没有提供服务,因此使用Chrome定位服务的浏览器,比如:Chrome、火狐、安卓原生WebView等环境的原生定位通常都会定位失败;
建议更换浏览器测试,推荐使用Edge 浏览器,或者翻墙。

相关文章:

【uni-app】申请高德地图key,封装map.js,实现H5、iOS、Android通过getlocation获取地图定位信息

文章目录 map组件基础使用封装map.js&#xff0c;实现定位1、使用第三方地图&#xff1a;高德&#xff0c;申请对应平台key1、申请H5 key2、申请微信小程序 key3、申请android key查看证书详情&#xff0c;可以看到SHA1查看/设置Android包名 4、申请ios key 2、封装map1、lib/m…...

使用rufus做Kali Linux时持久分区大小如何设置

持久分区大小是什么意思&#xff1a; 持久分区大小指的是在U盘安装引导Kali Linux时&#xff0c;为保存Kali修改后的设置&#xff08;如中文界面显示等&#xff09;而预留的空间大小。这个空间相当于电脑中的D盘&#xff0c;用于保存修改后的设置。 而剩下的空间则用于安装Kali…...

Java高阶数据结构-----并查集(详解)

目录 &#x1f9d0;一.并查集的基本概念&实例&#xff1a; &#x1f92a;二.并查集代码&#xff1a; &#x1f602;三&#xff1a;并查集的一些习题&#xff1a; A.省份数量 B.等式方程的可满足性 &#x1f9d0;一.并查集的基本概念&实例&#xff1a; 并查集概念&…...

GitLab教程(三):多人合作场景下如何pull代码和处理冲突

文章目录 1.拉取别人同步的代码到本地的流程2.push冲突发生场景情景模拟简单的解决方法 在这一章中&#xff0c;为了模拟多人合作的场景&#xff0c;我需要一个人分饰两角。 执行git clone xx远端仓库地址 xx文件夹命令&#xff0c;在clone代码时指定本地仓库的文件夹名&#…...

模版偏特化之std::enable_if

1 SFINAE。 2 条件特化。可用作额外的函数参数&#xff08;不可应用于运算符重载&#xff09;、返回类型&#xff08;不可应用于构造函数与析构函数&#xff09;&#xff0c;或类模板或函数模板形参。 函数参数&#xff1a; #include <iostream> #include <type_tra…...

好用的Web数据库管理工具推荐(ChatGPT的推荐)

在现代数据管理和开发中&#xff0c;Web数据库管理工具变得越来越重要。这些工具不仅提供了直观的用户界面&#xff0c;还支持跨平台操作&#xff0c;方便用户在任何地方进行数据库管理。 目录 1. SQLynx 2. phpMyAdmin 3. Adminer 4. DBeaver 5 结论 以下是几款推荐的Web…...

encoding Token和embedding 傻傻分不清楚?

encoding 编码 “encoding” 是一个在计算机科学和人工智能领域广泛使用的术语&#xff0c;它可以指代多种不同的过程和方法。核心就是编码&#xff1a;用某些数字来表示特定的信息。当然你或许会说字符集(Unicode)更理解这种概念&#xff0c;编码更强调这种动态的过程。而字符…...

一个公用的数据状态修改组件

灵感来自于一项重复的工作&#xff0c;下图中&#xff0c;这类禁用启用、审核通过不通过、设计成是什么状态否什么状态的场景很多。每一个都需要单独提供接口。重复工作还蛮大的。于是&#xff0c;基于该组件类捕获组件跳转写了这款通用接口。省时省力。 代码如下&#xff1a;…...

[python]yfinance国内不能使用

yfinance国内不能使用&#xff0c;可以使用tushare、akshare代替 import yfinance as yf# 输入股票代码 stock_symbol AAPL # 替换为你想要查询的股票代码# 获取股票数据 data yf.download(stock_symbol)# 打印实时数据 print(data) pip install akshare import akshare …...

Frontiers旗下期刊,23年分区表整理出炉!它还值得投吗?

本周投稿推荐 SSCI • 中科院2区&#xff0c;6.0-7.0&#xff08;录用友好&#xff09; EI • 各领域沾边均可&#xff08;2天录用&#xff09; CNKI • 7天录用-检索&#xff08;急录友好&#xff09; SCI&EI • 4区生物医学类&#xff0c;0.5-1.0&#xff08;录用…...

基于JSP的毕业生就业信息管理系统

开头语&#xff1a; 你好&#xff0c;我是专注于信息系统开发的学长猫哥。如果您对毕业生就业信息管理或相关技术感兴趣&#xff0c;欢迎联系我交流。 开发语言&#xff1a; JSP 数据库&#xff1a; MySQL 技术&#xff1a; JSP技术 SSM框架 工具&#xff1a; Eclips…...

CDN、CNAME、DNS

CDN、CNAME、DNS 域名解析是将域名转换为IP地址的过程。当用户在浏览器中输入域名时&#xff0c;计算机需要在DNS系统中找到对应的IP地址&#xff0c;以便能够访问该网站。 CDN&#xff08;Content Delivery Network&#xff0c;内容分发网络&#xff09;是一种用于加速网站访…...

直播商城源码-PC+APP+H5+小程序现成源码

随着电商行业的不断演进&#xff0c;直播商城已成为连接消费者和商品的新兴桥梁。直播商城源码提供了一个完整的解决方案&#xff0c;使得企业能够迅速搭建起一个覆盖PC、APP、H5和小程序的全渠道电商平台。本文将探讨直播商城源码的优势、关键功能以及如何选择适合的现成源码。…...

16. 《C语言》——【牛客网BC124 —— BC130题目讲解】

亲爱的读者&#xff0c;大家好&#xff01;我是一名正在学习编程的高校生。在这个博客里&#xff0c;我将和大家一起探讨编程技巧、分享实用工具&#xff0c;并交流学习心得。希望通过我的博客&#xff0c;你能学到有用的知识&#xff0c;提高自己的技能&#xff0c;成为一名优…...

Docker 国内镜像源更换

实现 替换docker 镜像源 前提要求 安装 docker docker-compose 参考创建一键更换docker国内镜像源 Docker 镜像代理DaoCloud 镜像站百度云 https://mirror.baidubce.com南京大学镜像站...

python07

__init__.py from . import p1 from . import p2 # 理解&#xff1a;import p2 先导入 p2 文件&#xff0c; 然后该文件的内容全要 from . # # 告诉调用者&#xff0c;哪些文件需要使用 p1.py def sum(a,b):print(a b) p2.py def max(a,b):if a > b:print(a)else:pri…...

【CTS】android CTS测试

android CTS测试 1.硬件准备2. 软件准备3. 下载 CTS3.1 cts3.2 解压 CTS 包&#xff1a; 4 配置adb fastboot5 检查 Java 版本6 安装aapt26.1 下载并安装 Android SDK6.2 找到 aapt2 工具6.3 配置环境变量 7. 准备测试设备8. 运行 CTS 测试8.1 启动 CTS&#xff1a; 9. 查看测试…...

【雷丰阳-谷粒商城 】【分布式基础篇-全栈开发篇】【08】【商品服务】Object划分_批量删除

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式基础篇-全栈开发篇】【08】【商品服务】Object划分_批量删除 Object划分批量删除/添加参考 Object划分 数据库中对于一张表的数据&#xff0c;由于拥有隐私字段、多余字段、字段过少等原因&#xff0c;不应该直…...

JAVA开发 PDF文件生成表格,表格根据内容自动调整高度

1、展示效果 2、相关功能实现 JAVA开发 使用Apache PDFBox库生成PDF文件&#xff0c;绘制表格 3、实现代码 import org.apache.pdfbox.pdmodel.PDDocument; import org.apache.pdfbox.pdmodel.PDPage; import org.apache.pdfbox.pdmodel.PDPageContentStream; import org.ap…...

OSINT技术情报精选·2024年6月第1周

OSINT技术情报精选2024年6月第1周 2024.6.11版权声明&#xff1a;本文为博主chszs的原创文章&#xff0c;未经博主允许不得转载。 1、经合组织&#xff1a;《2024数字经济展望&#xff1a;第1卷,拥抱技术前沿》 经合组织近日发布《2024数字经济展望》报告第一卷&#xff0c;…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

SpringAI实战:ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

2025.6.9总结(利与弊)

凡事都有两面性。在大厂上班也不例外。今天找开发定位问题&#xff0c;从一个接口人不断溯源到另一个 接口人。有时候&#xff0c;不知道是谁的责任填。将工作内容分的很细&#xff0c;每个人负责其中的一小块。我清楚的意识到&#xff0c;自己就是个可以随时替换的螺丝钉&…...