uniapp开发APP和微信小程序——使用高德实现定位
在uniapp官网中明确说了可以使用高德地图来实现APP和微信小程序的定位。
在dcloud社区里大佬已经给出了实现方法(链接:uni-app 中使用微信小程序第三方 SDK 及资源汇总 - DCloud问答),
百度的其他博客也是照搬的这里面的内容,可是,如果对于一个新手来说,具体的步骤还是不会操作,所以我来一步步的操作一下。
首先在高德开放平台,注册账号并且申请相关的 key 等信息;
首先在高德开放平台注册账号,如图创建应用。
然后分别申请安卓和微信小程序的key
安卓key:key名称可以随便填,服务平台选择Android平台,安全码SHA1我这里使用的是uniapp的公共测试证书(SHA1:BB:AC:E2:2F:97:3B:18:02:E7:D6:69:A3:7A:28:EF:D2:3F:A3:68:E7),PackageName填程序打包的包名
,申请完安卓key后,再申请微信小程序的key
然后下载它的微信小程序版 SDK:微信小程序 SDK。
新建一个 uni-app 项目,新建一个 common 目录,然后将前面下载得到的 amap-wx.js 的文件复制进去。
Tip:这个 common 目录只是举例,并非强制约定。但是,不要放在 static 目录下。
新建的 uni-app 默认会有一个 index 页,在 index.vue 中,引入高德小程序 SDK。
import amap from '../../common/amap-wx.js';
export default {
}
在 onLoad 中初始化一个高德小程序 SDK 的实例对象。
import amap from '../../common/amap-wx.js';
export default { data() { return { amapPlugin: null, key: '这里填写高德开放平台上申请的key' } }, onLoad() { this.amapPlugin = new amap.AMapWX({ key: this.key }); }
}
利用高德小程序 SDK,获取当前位置地址信息。
import amap from '../../common/amap-wx.js';
export default { data() { return { amapPlugin: null, key: '高德key', addressName: '', weather: { hasData: false, data: [] } } }, onLoad() { this.amapPlugin = new amap.AMapWX({ key: this.key }); }, methods: { getRegeo() { uni.showLoading({ title: '获取信息中' }); this.amapPlugin.getRegeo({ success: (data) => { console.log(data) this.addressName = data[0].name; uni.hideLoading(); } }); } }
}
到此,微信小程序就可以获得位置了。
APP还需要在manifest.json中配置key
在这里可能还需要ios的key,就再去申请一个ios的key
安全码Bundle ID就填打包时的(下图所示)
打包后在APP上也可以获得位置信息了。
uniapp开发APP和微信小程序——使用高德实现定位相关推荐
- 开发APP、微信小程序、网页,都需要什么?
开发APP,微信小程序,网页都需要什么? 准备工作 前端开发 后端开发 技术整合 打包上线 结语 在开始介绍之前,我先罗列一下APP,微信小程序,网页的大比较 准备工作 云服务器,域名(需备案),SS ...
- uniapp一套代码开发app和微信小程序
为什么选择uniapp开发? 为什么选择uniapp进行开发? 1.uniapp对于独自开发是相当友好的,一套代码可以兼容app(安卓,ios),小程序,h5等,一定程度上降低了开发的成本,个人开发的 ...
- 基于uniapp开发的适用于微信小程序,头条小程序
基于的uni-app开发的跨平台商城小程序(微信小程序,头条小程序,抖音小程序),合理的代码结构和规范的编码风格,能够让你很轻松的上手并转化成为自己的作品. 与之相支持的是,我们提供了一套完整的项目代 ...
- uniapp 开发H5打包微信小程序样式失效的解决之道
使用uniapp开发H5,样式已经按照UI设计稿全部实现.但是在打包微信小程序调试的时候,遇到很多样式失效的问题.问了度娘很久,并没有完全解决样式失效的问题.于是自己按照从度娘上查到的方法去进行组合尝 ...
- 微信小程序调用高德api定位当前经纬度,根据城市名获取对应经纬度
最近写小程序有一个首页关于定位功能,指定高德API,话不多说,上图: 首先小程序需要先设置定位提示语,在mainfest.json中添加配置scope.userLocation: "mp-w ...
- PHP开发B2C商城 微信小程序商城系统源码+数据库,轻量级前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP
项目介绍 一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...
- vue+uni-app商城实战 | 第一篇:从0到1快捷开发一个商城微信小程序,无缝接入OAuth2实现一键授权登录
一. 前言 本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...
- 21小时精通微信小程序开发(仿猫眼电影App、微信小程序问答)
21小时精通微信小程序开发(仿猫眼电影App.微信小程序问答) 网盘地址:https://pan.baidu.com/s/1GTpPX4A1U-w_3i6k7lLztQ 密码: 5pcz 备用地址(腾 ...
- json 微信小程序 筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件,适配app、微信小程序、H5。...
sl-filter 筛选 筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介 一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享 效果图 并列菜单 ...
最新文章
- 【转】IOS的各种后台情况的实现
- 谢文: 三网融合还是三网凑合(转一篇好文)
- C语言经典例5-输入三个数由小到大输出
- 中高德地图只显示某一城市_干货 | 如何快速制作数据地图?让你的可视化逼格再高一级!...
- Action Framework- Table PPFSFMLRU
- LeetCode-46. Permutations
- C/C++知识分享:C++标准库之 string 类型,各种运算全部掌握
- 怎样的销售能快速成交别人?
- 结构体的空间分配和位定义
- 动态迁移到另一点出现电源关闭的原因及解决方法
- 中获取当月天数_给商品期货策略加上一个闹钟--策略中的定时设计
- Visio2010绘制用例图
- 博士申请 | 美国北卡州立大学郭志山教授招收机器学习方向全奖博士生
- Java毕设答辩会问些什么?
- CF765F Souvenirs
- iis配置跨域请求头
- 你知道吗?iPhone7竟然都是机器人组装的
- 【Pygame合集】回忆杀-“童年游戏”,看看你中几枪?(附五款源码自取)
- 辞退既然不给离职在证明的易迅天空公司
- USB2.0规范-中文版免费下载
热门文章
- 辞职时老板说:“等项目做完了,给你加薪”项目做完他却被劝退了
- aws cloud services亚马逊云服务分类
- 系统的可靠性设计问答
- http://qq.ip138.com/baidu-id/index.asp
- LVS负载均衡群集之构建NAT模式
- 区块链3.0 ada Cardano卡尔达诺如何获得一致好评?
- ubuntu 下查看网卡流量速度
- 图形推理1000题pdf_数字推理题,眼尖的一眼就看出来了
- 有什么好的录屏软件?
- SpringCloud Alibaba(五)Nacos raft协议介绍