小程序地图学习之获取位置 获取经纬度 获取地名 获取地址
时间:2022-07-28
本文章向大家介绍小程序地图学习之获取位置 获取经纬度 获取地名 获取地址,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
“
我们在做小程序开发时,难免会遇到地图相关的开发,而小程序已经为我们提供的比较完善的地图组件。我们只需要调用相关的api就可以实现大致的功能。如:获取经纬度,获取位置,获取地址,获取地名。接下来就具体给大家讲解
”
老规矩先看效果图
1
接下来我们就来看看具体实现步骤
一,定义一个按钮来调用位置获取的api
<!--index.wxml-->
<button bindtap='getLocation'>获取位置信息</button>
<text>{{jingwei}}</text>
<text>{{address}}</text>
<text>{{name}}</text>
二,调用获取地理位置的方法
//index.js
Page({
getLocation() {
let that = this;
wx.chooseLocation({
success: function(res) {
console.log(res)
var latitude = res.latitude
var longitude = res.longitude;
that.setData({
jingwei: "经纬度:" + longitude + ", " + latitude,
address: " 地址:" + res.address,
name: " 地名:" + res.name
})
}
});
}
})
其实到这里我们就可以实现获取经纬度,获取位置信息的功能了。但是呢??现在小程序调用用户位置信息时,需要用户授权,如下图,如果用户点击了拒绝,我们就没有办法调用地图获取位置信息了。
所以呢,我们要想实现一个完整的获取用户位置信息的功能,就要在监测到用户拒绝的位置权限时,引导用户去重新授权。这样才是一个友好的健壮的程序。下面就来教大家如何引导用户去打开授权。
三,在app.json里注册位置权限
上图红色框里就是我们的位置权限的注册代码,app.json的完整代码如下。
{
"pages": [
"pages/index/index",
"pages/setting/setting"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"sitemapLocation": "sitemap.json"
}
四,定义检查位置权限是否打开的方法
//校验位置权限是否打开
checkLocation() {
let that = this;
//选择位置,需要用户授权
wx.getSetting({
success(res) {
if (!res.authSetting['scope.userLocation']) {
wx.authorize({
scope: 'scope.userLocation',
success() {
wx.showToast({ //这里提示失败原因
title: '授权成功!',
duration: 1500
})
},
fail() {
that.showSettingToast('需要授权位置信息');
}
})
}
}
})
},
这个方法就是来检查用户的位置权限是否授权,如果没有授权,就弹窗提示用户去授权页授权。弹窗代码如下:
// 打开权限设置页提示框
showSettingToast: function(e) {
wx.showModal({
title: '提示!',
confirmText: '去设置',
showCancel: false,
content: e,
success: function(res) {
if (res.confirm) {
wx.navigateTo({
url: '../setting/setting',
})
}
}
})
},
至此就可以实现一个完整的获取用户位置信息的小程序了,index.js完整代码如下:
//index.js
Page({
getLocation() {
this.checkLocation();
let that = this;
wx.chooseLocation({
success: function(res) {
console.log(res)
var latitude = res.latitude
var longitude = res.longitude;
that.setData({
jingwei: "经纬度:" + longitude + ", " + latitude,
address: " 地址:" + res.address,
name: " 地名:" + res.name
})
}
});
},
//校验位置权限是否打开
checkLocation() {
let that = this;
//选择位置,需要用户授权
wx.getSetting({
success(res) {
if (!res.authSetting['scope.userLocation']) {
wx.authorize({
scope: 'scope.userLocation',
success() {
wx.showToast({ //这里提示失败原因
title: '授权成功!',
duration: 1500
})
},
fail() {
that.showSettingToast('需要授权位置信息');
}
})
}
}
})
},
// 打开权限设置页提示框
showSettingToast: function(e) {
wx.showModal({
title: '提示!',
confirmText: '去设置',
showCancel: false,
content: e,
success: function(res) {
if (res.confirm) {
wx.navigateTo({
url: '../setting/setting',
})
}
}
})
},
})
从代码中可以看到,我们在用户拒绝授权时的提示框,点击会跳转到setting页,setting也是我们自己的页面,但是这个页面特别简单。就定义一个button。
<!--pages/setting/setting.wxml-->
<button class="button"
open-type="openSetting" type='primary'>
打开授权设置页
</button>
为什么要这么做呢,因为微信不允许我们直接打开权限设置页,必须通过button组件提供的开发能力去到设置页,这里的开放能力就是open-type="openSetting" 中的openSetting。我们点击按钮后就到了权限设置页。
这样就可以引导用户再次授权了。
- hadoop: hive 1.2.0 在mac机上的安装与配置
- ASP.NET 5运行时升级到Beta5
- WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式二)
- jQuery/asp.net mvc DateTime 的处理
- WordPress主题下funtions.php的一段“恶意”代码
- eclipse/intellij idea 远程调试hadoop 2.6.0
- Jexus 5.8.2 正式发布为Asp.Net Core进入生产环境提供平台支持
- 区块链技术发展前景可观,银链原子链已开始投入正常交易
- 分布式服务框架 dubbo/dubbox 入门示例
- SmtpClient发送邮件遭遇The specified string is not in the form required for a subject.
- 彻底解决WordPress 中 半角全角字符转义 的问题
- 利用Spring的@Async异步处理改善web应用中耗时操作的用户体验
- Oracle中使用Entity Framework 6.x Code-First方式开发
- 边缘计算推动AI发展 未来能摆脱云计算吗?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【Flutter 实战】全局点击空白处隐藏键盘
- 我对Flutter的第一次失望
- 【Flutter 实战】各种各样形状的组件
- 『Flutter-绘制篇』实现炫酷的雨雪特效
- 图书管理系统(Servlet+Jsp+Java+Mysql,附下载演示地址)
- Vuex 映射完全指南
- 我们是如何改进YOLOv3进行红外小目标检测的?
- Unity3D网络通讯(三)-- HttpRestful请求的简单封装
- 详解Elasticsearch 的性能优化
- console.log的那件事
- Codeforces Round #668 (Div. 2)A-D
- nodejs源码解析之udp服务器
- LeetCode | 35.搜索插入位置
- Redis | 源码阅读 —— 字符串
- 一个小白的角度看JavaScript Promise 完整指南