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

微信小程序 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.userLocationscope.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地址

代码 ///<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私有库进行组件化开发探索

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

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

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

在JBoss Fuse / Fabric8 / Karaf中使用Byteman

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

个人作业——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的安装

转自 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:单元测试断言

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

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完成网站点击流实时统计

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 几乎 开始以来&#xff0c;Java开发人员就通过java.util.Date类&#xff08;自JDK 1.0起&#xff09;和java.util.Calendar类&#xff08;自JDK 1.1起 &#xff09;来处理日期和时间。 在这段时间内&#xff0c;成千上万&#xff08;甚至可能数百万&#xff09;的Java开…

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

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

安装ipython和jupyter

本节内容&#xff1b; 安装ipython安装jupyterPycharm介绍 Python软件包管理一、安装ipython 1. python的交互式环境2. 安装ipython 可以使用pip命令安装。如果你是用pyenv安装的python的话&#xff0c;pip命令已经有了。 当需要安装包的时候&#xff0c;最好进入虚拟环境&…

vue 图片资源应该如何存放并引入(public、assets)?

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

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设置部分为不可选

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

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

1、效果展示&#xff1a; 2、需求&#xff1a; 下拉框及月份都为不空&#xff0c;且有文件数据才能提交上传。 3、环境&#xff1a; 目前项目中引用的 layui 版本是 2.4.5。在 before 中进行判断&#xff0c;使用 return false 想要阻止文件上传没反应&#xff0c;文件仍然会…

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

P1310 表达式的值 题目描述 给你一个带括号的布尔表达式&#xff0c;其中表示或操作|&#xff0c;*表示与操作&&#xff0c;先算*再算。但是待操作的数字&#xff08;布尔值&#xff09;不输入。 求能使最终整个式子的值为0的方案数。 题外话 不久之前我在codewars上做过一…

vue+element 封装日期范围组件(双向绑定)

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