uniapp 在h5和小程序上使用高德获取用户城市位置
- 开发文档 https://lbs.amap.com/api
- 错误状态 https://lbs.amap.com/api/webservice/guide/tools/info/
- 虽然用的高德但是你还需要申请一个腾讯地图的key来使用getLocation API
- https://uniapp.dcloud.io/collocation/manifest?id=h5sdkconfig
import amap from '@/static/lib/amap-wx.js'; // 只能用于小程序
const amap_wx_key = '<微信key>';
const amap_h5_key = '<Web服务key>';
let _key = '';
// #ifdef H5
_key = amap_h5_key
uni.getLocation({
success: function(pos) {
uni.request({
method: 'GET',
url: 'https://restapi.amap.com/v3/geocode/regeo',
data: {
key: _key,
location: `${pos.longitude},${pos.latitude}`,
poitype: '城市',
},
success: ({
data
}) => {
const city = data.regeocode.addressComponent.city
commit('setCity', city)
res(city);
},
fail: r => {
console.log(r);
}
});
}
});
// #endif
// #ifdef MP-WEIXIN
_key = amap_wx_key
// 小程序需要配置 restapi.amap.com 为合法域名
this.amapPlugin = new amap.AMapWX({
key: _key
});
this.amapPlugin.getRegeo({
success: data => {
const city = data[0].regeocodeData.addressComponent.city;
commit('setCity', city)
res(city);
},
fail(e) {
console.error(e);
uni.showModal({
title: e.errCode,
content: e.errMsg,
})
}
});
// #endif
uniapp 在h5和小程序上使用高德获取用户城市位置的更多相关文章
- 微信小程序-form表单-获取用户输入文本框的值
微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...
- 移动端学习之理解WEB APP、Native APP、Hybrid APP以及React Native/uniapp包括H5、小程序等的区别与共通之处
因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H ...
- 小程序使用wx.chooseAddress获取用户手机号码,微信chooseAddress接口获取用户收货信息
通常用户在商城购买产品后,需要填写他的收货信息,方便我们发货,但是在手机上写字非常不方便,一个客户的收货信息包括:姓名,地址和手机号码这些内容全部填写的话,至少要写20个字. 地址 所以有些客户在手机 ...
- 微信小程序~App.js中获取用户信息
(1)代码:主要介绍下获取用户信息部分 onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] l ...
- 小程序app.onLaunch中获取用户信息,index.onLoad初次载入时取不到值的问题
问题描述: //app.js App({ globalData:{ nickname:'' }, onLaunch: function () { let that=this; //假设已经授权成功 w ...
- 微信小程序云开发-数据库-获取用户添加的数据到数据库
一.列表页面新增[添加商品]按钮 在列表页增加[添加商品]按钮,按钮绑定事件toAdd(),用户点击该按钮跳转到添加商品页面. 在js文件中写toAdd()函数,作用是点击[添加商品]按钮,跳转到[添 ...
- 前端生成分享海报兼容H5和小程序
### 移动端分享海报生成 最近做项目需求是生成商品分享海报,并且保存到手机中要兼容H5和小程序<br> 与后端同学沟通后,海报在前端生成最省性能和有较好的交互体验,先看做好的效果
- 百度小程序上传失败 ServerError:30010的原因
最近通过uniapp编译百度智能小程序后上传遇到了报错,错误码为30010. 原因很简单开发者工具和版本库产生了冲突. 两个解决方案,升级开发者工具,降低发布时的版本库 exit;
- 全栈开发工程师微信小程序-上(下)
全栈开发工程师微信小程序-上(下) icon 图标 success, success_no_circle, info, warn, waiting, cancel, download, search, ...
随机推荐
- 使用JWT创建安全的ASP.NET Core Web API
在本文中,你将学习如何在ASP.NET Core Web API中使用JWT身份验证.我将在编写代码时逐步简化.我们将构建两个终结点,一个用于客户登录,另一个用于获取客户订单.这些api将连接到在本地 ...
- loj10007线段
题目描述 数轴上有 n 条线段,选取其中 k 条线段使得这 k 条线段两两没有重合部分,问 k 最大为多少. 输入格式 第一行为一个正整数 n: 在接下来的 n 行中,每行有 2 个数 a_i,b_i ...
- vue3系列:vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件
基于Vue3.0构建PC桌面端自定义美化滚动条组件V3Scroll. 前段时间有分享一个Vue3 PC网页端弹窗组件,今天带来最新开发的Vue3.0版虚拟滚动条组件. V3Scroll 使用vue3. ...
- Linux 使用Vmware克隆,修改克隆机器内容
在Vmware中搭建好一台虚拟机,拍照快照,然后克隆其他集群进行练习,克隆后的机器都需要修改的内容有如下几点: 1:各机器之间,在网络上能够互相ping通 每台机器的IP地址必须是唯一的. 进入 ca ...
- js将金额转成大写金额
function Chinese(){ /* var num= $(dialogStruct.iframe.contentDocument.getElementById("contractA ...
- UML——构件图
宏观导图: 细节探究: 一.What 构件:是一个应用很广的名词,在建筑工程.机械工程.软件工程中等都有该概念.其实,说道底表达的都是一个意思.就像是标准化生产出来的零部件一样,具有可替换性.同质性, ...
- Leetcode LRU缓存,数组+结构体实现
一.算法思路 LRUCache类有以下函数和变量: LRUCache(int capacity): capacity是当前对象能够存储的键值对(key,value)最大个数. int get(int ...
- WPS Excel启用正则表达式
WPS Excel启用正则表达式 新建一个空白表格文件 进入VB编辑器 插入模块 工具-引用-勾选正则表达式 (Microsoft VBScript Regular Express 5.5) 复制代码 ...
- 2020牛客暑期多校训练营(第八场)Interesting Computer Game
传送门:Interesting Computer Game 题意 给出n对数,你可以操作n次,每次操作只能在下面三种中选择一种,问最多可以选多少个不同的数字. 什么都不做 如果a[i]以前没选过,那么 ...
- Codeforces Round #628 (Div. 2) A. EhAb AnD gCd(LCM & GCD)
题意: GCD(a,b) + LCM(a,b) = n,已知 n ,求 a,b. 思路: 设 gcd(a, b) = k, a = xk, b = yk , k + ab / k = n xy = n ...