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

微信小程序 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，一经查实，立即删除！

相关文章

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

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

效果展示&#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…
阅读更多...
微信小程序 监听位置信息

微信小程序 监听位置信息

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…
阅读更多...
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…
阅读更多...
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 …
阅读更多...
大数据学习——SparkStreaming整合Kafka完成网站点击流实时统计

大数据学习——SparkStreaming整合Kafka完成网站点击流实时统计

1.安装并配置zk 2.安装并配置Kafka 3.启动zk 4.启动Kafka 5.创建topic [rootmini3 kafka]# bin/kafka-console-producer.sh --broker-list mini1:9092 --topic cyf-test 程序代码 package org.apache.sparkimport java.net.InetSocketAddressimport org.apache.spark.HashParti…
阅读更多...
日期/时间格式/解析，Java 8样式

日期/时间格式/解析，Java 8样式

自Java 几乎 开始以来&#xff0c;Java开发人员就通过java.util.Date类&#xff08;自JDK 1.0起&#xff09;和java.util.Calendar类&#xff08;自JDK 1.1起 &#xff09;来处理日期和时间。 在这段时间内&#xff0c;成千上万&#xff08;甚至可能数百万&#xff09;的Java开…
阅读更多...
无废话WPF系列5：控件派生图

无废话WPF系列5：控件派生图

1. WPF类控件的派生关系图&#xff0c;紫色的部分开始才算是进入WPF的框架里。 2. WPF控件图 WPF的UI控件主要有以下类型&#xff0c;ContentControl, HeaderedContentControl, ItemsControl, HeaderedItemsControl, Panel, Adorner(文字点缀元素), Flow Text(流式文本元素), T…
阅读更多...
安装ipython和jupyter

安装ipython和jupyter

本节内容&#xff1b; 安装ipython安装jupyterPycharm介绍 Python软件包管理一、安装ipython 1. python的交互式环境2. 安装ipython 可以使用pip命令安装。如果你是用pyenv安装的python的话&#xff0c;pip命令已经有了。 当需要安装包的时候&#xff0c;最好进入虚拟环境&…
阅读更多...
vue 图片资源应该如何存放并引入（public、assets）？

vue 图片资源应该如何存放并引入（public、assets）？

全局cli配置&#xff1a;vue.config.js 之前写项目就想着怎么简单怎么来&#xff0c;图片要用了&#xff0c;就直接在要用图片的页面&#xff0c;新建一个跟页面同等级的 imgs 文件夹&#xff0c;然后在页面中直接 “./imgs/图片.png”&#xff0c;不得不说这样写很方便。 但是…
阅读更多...
layui 树形组件下拉框

layui 树形组件下拉框

采用 layui 树形组件&#xff0c;版本&#xff1a;V2.6.8。只需要更新layui版本&#xff0c;不需要下载tableSelect。 原作者博客&#xff1a;https://blog.csdn.net/m0_67402588/article/details/123526860。 从 官网 更新日志可以看到&#xff0c;树形组件在2.5.7版本还在更新…
阅读更多...
layui table表格的复选框checkbox设置部分为不可选

layui table表格的复选框checkbox设置部分为不可选

需求&#xff1a;如上图&#xff0c;某些数据禁用删除功能&#xff0c;那么全选时&#xff0c;这些数据前面的复选框也不能选。 实现&#xff1a;在layui数据表格中设置了字段为 type:checkbox 但是想要实现部分不显示&#xff0c;不可选的功能。layui内置没有该功能&#xff…
阅读更多...
layui upload阻止文件上传问题，及多选文件上传

layui upload阻止文件上传问题，及多选文件上传

1、效果展示&#xff1a; 2、需求&#xff1a; 下拉框及月份都为不空&#xff0c;且有文件数据才能提交上传。 3、环境&#xff1a; 目前项目中引用的 layui 版本是 2.4.5。在 before 中进行判断&#xff0c;使用 return false 想要阻止文件上传没反应&#xff0c;文件仍然会…
阅读更多...
2019.06.17课件：[洛谷P1310]表达式的值 题解

2019.06.17课件：[洛谷P1310]表达式的值 题解

P1310 表达式的值 题目描述 给你一个带括号的布尔表达式&#xff0c;其中表示或操作|&#xff0c;*表示与操作&&#xff0c;先算*再算。但是待操作的数字&#xff08;布尔值&#xff09;不输入。 求能使最终整个式子的值为0的方案数。 题外话 不久之前我在codewars上做过一…
阅读更多...
vue+element 封装日期范围组件（双向绑定）

vue+element 封装日期范围组件（双向绑定）

像这样的日期组件&#xff0c;在后台管理项目中是比较多的&#xff0c;而且加了快捷选项&#xff0c;代码量较多&#xff0c;因此封装成组件。 封装这一类型的组组件&#xff0c;主要是了解输入框双向绑定 v-model 的过程。 1、了解输入框双向绑定的过程&#xff1a; 官网&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023