小程序 获取当前城市位置-高德地图

微信小程序 wx.getLocation 只能获取到经纬度，想要获取具体城市信息，需要使用地图插件。公司要求使用 高德地图，在使用上，几个地图的代码步骤都差不多。

目录

1. 查看官方文档

1.1 申请高德地图Key，点击查看申请key的方法。

1.2 从相关下载页面下载开发包并解压。

1.3 设置安全域名

1.4 使用：

2.  在项目中的使用过程

2.1 首先在app.json中配置：

2.2 获取位置信息

2.3 经纬度转换为城市信息

 3. 重新授权

4. 小程序文档更新

4.1 解决： 

1. 查看官方文档

1.1 申请高德地图Key，点击查看申请key的方法。

1.2 从相关下载页面下载开发包并解压。

解压后得到 amap-wx.js 文件，在创建的项目中，新建一个名为 libs 目录，将 amap-wx.js 文件拷贝到 libs 的本地目录下，完成安装。

1.3 设置安全域名

为了保证高德小程序插件中提供的功能的正常使用，需要设置安全域名。

登录微信公众平台，在 "设置"－>"开发设置" 中设置 request 合法域名，将 https://restapi.amap.com 中添加进去，如下图所示：

1.4 使用：

  1. 在页面的 js 文件中，实例化 AMapWX 对象，处理搜索数据。
    首先，引入 amap-wx.js 文件（amap-wx.js  从相关下载页面下载的 zip 文件解压后得到）。 
    var amapFile = require('路径');//如：..­/..­/libs/amap-wx.js

    然后，构造 AMapWX 对象，并调用 getRegeo 方法，代码如下：

    Page({onLoad: function() {var that = this;var myAmapFun = new amapFile.AMapWX({key:'高德Key'});myAmapFun.getRegeo({success: function(data){//成功回调},fail: function(info){//失败回调console.log(info)}})},
})

  2. 编写页面的 wxml 文件，搭建页面结构。

    <view class="map_container"><!--定义页面结构，可以使用地图组件也能使用其他组件 -->
</view>

  3. 编写页面的 wxss 文件，设置页面样式。

    .map_container{position: absolute;top: 0;bottom: 0;left: 0;right: 0;
}

2.  在项目中的使用过程

授权 | 微信开放文档

注意事项

  1. 需要授权 scope.userLocation、scope.userLocationBackground 时必须配置地理位置用途说明。
  2. 授权弹窗会展示小程序在小程序用户隐私保护指引中填写的说明，请谨慎填写。

后台定位

安卓 8.0.0 , iOS 8.0.0 起，若开发者未通过 wx.authorize({scope: 'scope.userLocation'}) 请求过位置权限，支持通过 wx.authorize({scope: 'scope.userLocationBackground'}) 唤起后台使用地理位置授权窗口。

低于以上版本，scope.userLocationBackground 不会弹窗提醒用户。需要用户在设置页中，主动将“位置信息”选项设置为“使用小程序期间和离开小程序后”。开发者可以通过调用wx.openSetting，打开设置页。

2.1 首先在app.json中配置：

"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的地址展示" // 高速公路行驶持续后台定位}
}

2.2 获取位置信息

wx.getLocation({success: function(res) {console.log("经纬度",res);},
})

使用这个api，页面上就会弹出申请位置信息的弹框，弹框中的提示信息是在 2.1 中配置的文字内容 。 点击“允许”，就能获取到经纬度。

微信小程序 - 获取所在位置(省、市、区) - Sunsin - 博客园实现步骤 1. 获取当前经纬度 2. 调用腾讯(百度、高德)地图对应的请求地址，一般都会有独一的key, 譬如 腾讯地图调用地址： 百度地图调用地址： wxml jshttps://www.cnblogs.com/cisum/p/9809993.html

2.3 经纬度转换为城市信息

const amapFile = require('./libs/amap-wx.130'); //下载的高德地图包page({onShow: function(){//若用户登录了且没有位置信息，则弹出位置框if(!wx.getStorageSync('address') && wx.getStorageSync('storageLogin')){  this.getUserLocation(); //获取位置}},//获取用户经纬度 latitude纬度, longitude经度getUserLocation(){var that = this;wx.getLocation({success: function(res){console.log("经纬度",res);that.getAddress(res.latitude,res.longitude); //转换为城市}})},//转换成省市区 latitude纬度，long经度getAddress(latitude, longitude){var that = this;var myAmapFun = new amapFile.AMapWX({ key: "你申请的可以值" }); myAmapFun.getRegeo({location: '' + longitude + ',' + latitude + '',//location的格式为'经度,纬度'success: function (data) {console.log("转换成省市",data);let {province,city,district} = data[0].regeocodeData.addressComponent;city = (city || city.length>0) ? city:"";console.log("省市区"：province+city+district)     },fail: function (info) { }})},})

 3. 重新授权

 当用户拒绝申请位置信息时，再次使用 wx.getLocation 是无法再次调用弹框的，需要我们通过 wx.getSetting 判断用户是否授权位置信息，然后提示用户去权限设置页进行授权。

wx.getSetting({success(res){if(!res.authSetting['scope.userLocation']){app.utils.showModal('检测到您没打开此小程序的定位权限，是否去设置打开？', '提示').then(()=>{wx.openSetting({success: function(e){console.log("打开授权页面",e);app.getUserLocation(); //获取地址信息},})})} else {//执行用户授权了位置信息的操作}}
})

微信小程序-获取当前城市位置_Anita梅梅的博客-CSDN博客_微信小程序获取地理位置    微信小程序-获取当前城市位置   1， 获取当前地理位置，首先要拿到用户的授权wx.openSetting；    2，微信的getLocation接口，获取当前用户的地理位置（微信返回的是经纬度，速度等参数）；    3，微信没有将经纬度直接转换为地理位置，借用腾讯位置服务中关于微信小程序的地理转换JS SDK 的API（返回信息中包括国家，省，市，区，经纬度等地理位置）步骤描述清楚以后...https://blog.csdn.net/weixin_42262436/article/details/80458430微信小程序拒绝授权后重新拉起授权窗口 - 格物致知ayy - 博客园问题： 在首次进入小程序时，我们常常会收到一些获取权限的申请，比如「获取地理位置权限」、需要微信登录时请求「获得你的公开信息（昵称、头像等）」。对于这些权限申请，开发者当然希望获得所有权限，而用户拒绝https://www.cnblogs.com/gwzzayy/p/11460202.html

4. 小程序文档更新

小程序文档更新了， 调用 wx.getLocation() 总是报以下错误：

wx.getLocation({success: function(res){console.log("onShow经纬度",res); },fail: function(err){console.log("获取经纬度失败", err)}
})

4.1 解决： 

第一步：在配置时改成以下：

"permission": {"scope.userLocation": {"desc": "你的位置信息将用于记录扫码位置"}
},
"requiredPrivateInfos": ["getLocation","chooseLocation"
]

第二步：去 微信公众号平台 -》开发管理 -》接口设置 中开通“获取当前接口、位置”的API：

微信小程序调定位失败或提示 chooseLocation:fail the api need to be declared in the requiredPrivateInfos field in_老张代码的博客-CSDN博客_chooselocation:fail

 

uniapp小程序定位 配置permission失败问题_我是开心呀的博客-CSDN博客之前一直是在pages.json里配置"permission": {"scope.userLocation": {"desc": "您的位置信息将用于附近商家位置信息的展示"}}一直提示‘getLocation需要在app.json中声明permission最后找到解决办法是在manifest.json里的mp-weixin里添加![在这里插入图片描述](https://img-blog.csdnimg.cn/ed2f92220bf84189b7c257fdb0e6c727.pnhttps://blog.csdn.net/qq_38881495/article/details/123232436

uni.getLocation无法触发，不管用的解决办法_磐石BedRock的博客-CSDN博客_uni.getlocation前言本文章解决了uni.getLocation在H5端以及小程序端的问题，APP端没有测试在使用Uni开发多端应用时，我们用到定位的情况，首先会使用的就是uni自身提供的uni.getLocation，可是在代码中调用的时候，小程序端只返回了经纬度，H5端直接无法触发函数，甚至连调用失败fail都无法触发。接下来就解决掉这两端的问题小程序端首先说的是，我们单独拿到经纬度，无法获取到更加详细...https://blog.csdn.net/qq_38774121/article/details/103997218

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

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

相关文章

会议之于思考

会议之于思考

从开始学习英语,我们几乎每天都要开会,讨论问题,确切的说是我们提出疑问,老师在给我们解答.这样高密集的开会,在提高班还是很少见到的 因为老师一个人带了很多学生,还有其他的工作要做.平时可是享受不到这样的待遇的.(其实我们的开会就是上课) 开的会多了,我就想到一个问题.为什…
阅读更多...
摇篮善良：仅添加包装用于战争

摇篮善良：仅添加包装用于战争

我的同事Tom Wetjens 在Maven中撰写了博客文章仅打包依赖项 。 当我们想在WAR文件中包含依赖项时&#xff0c;他展示了一种Maven解决方案&#xff0c;而在其他任何作用域中都没有使用。 在这篇博客中&#xff0c;我们将看到我们如何在Gradle中解决这个问题。 假设我们在项目中…
阅读更多...
网页端调用企业微信扫一扫 详细过程

网页端调用企业微信扫一扫 详细过程

效果展示&#xff08;需要使用微信内置浏览器打开&#xff09;&#xff1a; 目录 1. 快速集成H5开发应用 1.1 开始 1.2 创建应用 1.2.1 登录管理后台 1.2.2 添加自建应用 1.2.3 配置应用 1.2.4 获取应用的 AgentID 与 Secret 1.3 配置应用 1.3.1 配置应用主页 1.3.2 配置…
阅读更多...
获取ip地址

获取ip地址

代码 ///<summary>///取得客户端真实IP。如果有代理则取第一个非内网地址 ///</summary>publicstringIPAddress { get{ stringresult String.Empty; result HttpContext.Current.Request.ServerVariables["HTTP_X_FORWAR…
阅读更多...
Oracle DBA 学习总结

Oracle DBA 学习总结

对于学习Oracle 数据库&#xff0c;应该先要了解Oracle 的框架。它有物理结构&#xff08;由控制文件、数据文件、重做日志文件、参数文件、归档文件、密码文件组成&#xff09; &#xff0c;逻辑结构&#xff08;表空间、段、区、块&#xff09;&#xff0c;内存分配&#xff…
阅读更多...
lodash round

lodash round

_.round(number, [precision0])根据 precision 四舍五入 number。 _.round(4.006);// > 4_.round(4.006, 2);// > 4.01_.round(4060, -2);// > 4100 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com
阅读更多...
可怕的DefaultAbstractHelperImpl

可怕的DefaultAbstractHelperImpl

不久前&#xff0c;我们发布了这个有趣的游戏&#xff0c;我们称之为Spring API Bingo 。 当形成有意义的类名时&#xff0c;它是对Spring的巨大创造力的赞美和奉承。 FactoryAdvisorAdapterHandlerLoader ContainerPreTranslatorInfoDisposable BeanFactoryDe​​stination…
阅读更多...
微信小程序 监听位置信息

微信小程序 监听位置信息

wx.onLocationChange(function callback) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.onLocationChange.html 小程序 获取当前城市位置-高德地图_Start2019-CSDN博客小程序获取位置信息&#xff0c;包括省市区、用户…
阅读更多...
通过构建Cocoapods私有库进行组件化开发探索

通过构建Cocoapods私有库进行组件化开发探索

专题一 一、创建私有索引库 选Github或者码云都可以&#xff0c;本例以Github为例。创建私有索引库用来作为自己组件库的索引&#xff1a; 二、本地添加私有索引库 添加&#xff1a;pod repo add 索引库名称 索引库地址 例&#xff1a;pod repo add ZYHModule https://github.c…
阅读更多...
lodash 数组元素查找 findIndex

lodash 数组元素查找 findIndex

_.findIndex(array, [predicate_.identity])这个方法类似 _.find。除了它返回最先通过 predicate 判断为真值的元素的 index &#xff0c;而不是元素本身。<!DOCTYPE html><html lang"zh"><head><meta charset"UTF-8" /><meta …
阅读更多...
layui 父页面弹框中获取子页面的内容

layui 父页面弹框中获取子页面的内容

layer弹层组件开发文档 - Layuihttps://www.layui.site/doc/modules/layer.html#layer.getChildFrame 需求及代码分析 如上图&#xff0c;原来是点击一个按钮跳转到子页面&#xff0c;现在想改为&#xff1a;点击按钮&#xff0c;在当前页打开。因为不想要重写子页面的样式及内…
阅读更多...
在JBoss Fuse / Fabric8 / Karaf中使用Byteman

在JBoss Fuse / Fabric8 / Karaf中使用Byteman

您是否曾经尝试过了解一些非常简单的方法不起作用的过程&#xff1f; 您正在任何众所周知的上下文中编写代码&#xff0c;无论出于何种原因它都无法正常工作。 而且您信任您的平台&#xff0c;因此您认真阅读了所有日志。 而且&#xff0c;您仍然不知道为什么某些行为不符合预…
阅读更多...
个人作业——Alpha项目测试

个人作业——Alpha项目测试

一、 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/ 这个作业要求在哪里 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1/homework/3338 团队名称 西柚皇家编程团队&#xff1a;https://www.cnblogs.com/TakeRa…
阅读更多...
HttpURLConnection的警告

HttpURLConnection的警告

这段代码对您来说还不错吗&#xff1f; HttpURLConnection connection null; try {connection (HttpURLConnection) url.openConnection();try (InputStream in url.getInputStream()) {return streamToString(in);} } finally {if (connection ! null) connection.disconn…
阅读更多...
LeapFTP 注册码

LeapFTP 注册码

LeapFTP v2.7.6.613 汉化版II 特别版Name:crsky Code:214065-658136565http://www.crsky.com/soft/664.htmlLeapFTP v2.7.6.613 英文版http://www.crsky.com/soft/378.htmlName:crsky Code:214065-658136565------------LeapFTP 2.7.6.613 汉化版软件类别&#xff1a;汉化补丁/…
阅读更多...
Windows7下Docker的安装

Windows7下Docker的安装

转自 https://blog.csdn.net/xiangxiezhuren/article/details/79698913 无法打开图3&#xff0c;打开属性。给其添加git路径 无法使用图2下载 https://www.cnblogs.com/huang-yc/p/10350408.html 转载于:https://www.cnblogs.com/shufeiyang/p/11016177.html
阅读更多...
简而言之，JUnit：单元测试断言

简而言之，JUnit：单元测试断言

简而言之&#xff0c;本章涵盖了各种单元测试断言技术。 它详细说明了内置机制&#xff0c; Hamcrest匹配器和AssertJ断言的优缺点 。 正在进行的示例扩大了该主题&#xff0c;并说明了如何创建和使用自定义匹配器/断言。 单元测试断言 信任但要验证 罗纳德里根&#xff08;R…
阅读更多...
vue 安装使用mockjs

vue 安装使用mockjs

使用 mockjs 的案例过程&#xff1a; 1. 安装 npm install axios -S npm install mockjs --save-dev npm install --save 、--save-dev 、-D、-S 的区别与NODE_ENV的配置_jwl_willon的博客-CSDN博客_npm save备注&#xff1a;<> 意为等价于&#xff1b;1、npm install …
阅读更多...
vue 总结

vue 总结

1、尽量不操作dom 使用数据双向绑定 2、使用指令 如:title 不是title 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com
阅读更多...
OpenFileDialog 类的ShowDialog() 错误的解决

OpenFileDialog 类的ShowDialog() 错误的解决

首先&#xff0c;一个类里&#xff0c;有个linkLabel1 private OpenFileDialog openFileDialog1;private DialogResult result; private void linkLabel1_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e) { openFileDialog1 new OpenFileDialog(); …
阅读更多...
最新文章

Copyright @ 2022~2023