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和小程序上使用高德获取用户城市位置的更多相关文章

  1. 微信小程序-form表单-获取用户输入文本框的值

    微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...

  2. 移动端学习之理解WEB APP、Native APP、Hybrid APP以及React Native/uniapp包括H5、小程序等的区别与共通之处

    因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H ...

  3. 小程序使用wx.chooseAddress获取用户手机号码,微信chooseAddress接口获取用户收货信息

    通常用户在商城购买产品后,需要填写他的收货信息,方便我们发货,但是在手机上写字非常不方便,一个客户的收货信息包括:姓名,地址和手机号码这些内容全部填写的话,至少要写20个字. 地址 所以有些客户在手机 ...

  4. 微信小程序~App.js中获取用户信息

    (1)代码:主要介绍下获取用户信息部分 onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] l ...

  5. 小程序app.onLaunch中获取用户信息,index.onLoad初次载入时取不到值的问题

    问题描述: //app.js App({ globalData:{ nickname:'' }, onLaunch: function () { let that=this; //假设已经授权成功 w ...

  6. 微信小程序云开发-数据库-获取用户添加的数据到数据库

    一.列表页面新增[添加商品]按钮 在列表页增加[添加商品]按钮,按钮绑定事件toAdd(),用户点击该按钮跳转到添加商品页面. 在js文件中写toAdd()函数,作用是点击[添加商品]按钮,跳转到[添 ...

  7. 前端生成分享海报兼容H5和小程序

    ### 移动端分享海报生成 最近做项目需求是生成商品分享海报,并且保存到手机中要兼容H5和小程序<br> 与后端同学沟通后,海报在前端生成最省性能和有较好的交互体验,先看做好的效果

  8. 百度小程序上传失败 ServerError:30010的原因

    最近通过uniapp编译百度智能小程序后上传遇到了报错,错误码为30010. 原因很简单开发者工具和版本库产生了冲突. 两个解决方案,升级开发者工具,降低发布时的版本库 exit;

  9. 全栈开发工程师微信小程序-上(下)

    全栈开发工程师微信小程序-上(下) icon 图标 success, success_no_circle, info, warn, waiting, cancel, download, search, ...

随机推荐

  1. springboot项目-声明式事务失效

    1.项目背景 集成了shiro配置 2. 项目分析 由于ShiroFilterFactoryBean实现了FactoryBean接口,所以它会提前被初始化.又因为SecurityManager,Sec ...

  2. SSRF漏洞挖掘利用技巧

    参考文章 SSRF漏洞(原理&绕过姿势) SSRF绕过方法总结 SSRF绕过IP限制方法总结 Tag: #SSRF Ref: 概述 总结 利用一个可以发起网络请求的服务当作跳板来攻击内部其他服 ...

  3. Vue3(三)CND + ES6的import + 工程化的目录结构 = 啥?

    突发奇想 这几天整理了一下vue的几种使用方式,对比之后发现有很多相似之处,那么是不是可以混合使用呢?比如这样: vue的全家桶和UI库,采用传统的方式加载(CND.script). 自己写的js代码 ...

  4. Spark 将DataFrame所有的列类型改为double

    Spark 将DataFrame所有的列类型改为double 1.单列转化方法 2.循环转变 3.通过:_* 1.单列转化方法 import org.apache.spark.sql.types._ ...

  5. markdown 编辑器使用教程---字体、颜色、表格换行、链接等

    资源池: 绿色版markdown编辑器:点击这里 提取码:ftf9 1.标题 #一级标题 ##二级标题 ###三级标题 ####四级标题 #####五级标题 ######六级标题 一级标题 二级标题 ...

  6. 服务器CPU又爆了?Linux快速排查Java程序占用CPU很高的方法

    这个问题可以说是 Java 面试的高频面试题了,有很多面试官都喜欢问这个问题,问题可能是下面这样的. 线上一台服务器 CPU 使用率100% 了,如果你碰到这样的情况,如何排查并找到问题原因? 1.场 ...

  7. unix环境高级编程第三章笔记

    文件描述符 1.文件描述符的概念 对于内核而言,所有打开的文件都会用一个文件描述符来引用,打开或和创建一个新文件的时候,内核会给进程返回一个文件描述符,而当使用read write时,可以使用这个文件 ...

  8. ProBuilder快速原型开发技术 ---操作基础

    本篇文章笔者对ProBuilder(以下简称:PB),进行操作基础的介绍. 一:PB大小图标显示方式 PB操作面板有两种显示方式:小图标与大图标.大图标优点是显示清晰操作方便,缺点是没有更加精确的参数 ...

  9. A - 欧拉回路

    欧拉回路是指不令笔离开纸面,可画过图中每条边仅一次,且可以回到起点的一条回路.现给定一个图,问是否存在欧拉回路? Input测试输入包含若干测试用例.每个测试用例的第1行给出两个正整数,分别是节点数N ...

  10. P3195 [HNOI2008] 玩具装箱(斜率优化DP)

    题目链接 设\(d[i]\)为将前 \(i\) 个玩具装入箱中所需得最小费用 容易得到动态转移方程: \[d[i] = min(d[j] + (s[i]-s[j]+i-j-1-L)^2), (j< ...