uniapp h5 位置选择，微信定位+腾讯位置服务获取当前地址，逆地址解析

我的网站：https://green.yuansu.space

一、获取当前地理坐标

首先引入JSSDK

npm install jweixin-module --save

使用

var jweixin = require('jweixin-module')
jweixin.ready(function(){  // TODO
});

DCloud官网的论坛，有分享的例子http://ask.dcloud.net.cn/article/36007。

我这里做个定位接口例子。

首先要看微信的文档。清楚大致的流程。https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

1、common目录，创建文件，名称是wechat.js。内容如下：

注意要点：

1、前端域名要放在微信公众平台js安全域名下。

2、 url:(window.location.href).split('#')[0] 当前页面url作为参数进行数字签名。

// import request from './request';
var jweixin = require('jweixin-module');
import store from '@/store'
import api from '@/common/vmeitime-http/' //自己封装的网络请求类，也可以直接使用uni.request export default {//判断是否在微信中  isWechat: function() {var ua = window.navigator.userAgent.toLowerCase();if (ua.match(/micromessenger/i) == 'micromessenger') {// console.log('是微信客户端')return true;} else {// console.log('不是微信客户端')return false;}},//初始化sdk配置  initJssdkShare: function(callback, url) {//服务端进行签名 ，可使用uni.request替换。 签名算法请看文档  post('https://fbyc.microchainsoft.cn/index/wechat/getSignPackage',{url: url},function(res) {// console.log(res)if (res.data) {jweixin.config({debug: true,appId: res.data.appId,timestamp: res.data.timestamp,nonceStr: res.data.nonceStr,signature: res.data.signature,jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','getLocation']});//配置完成后，再执行分享等功能  if (callback) {callback(res.data);}}});},initJssdk:function(callback){api.getAddressCoordinate({appId:uni.getStorageSync('hmAppId'),url:(window.location.href).split('#')[0]}).then((res)=>{if(res.data){console.log(".data===="+JSON.stringify(res.data))console.log(".data.data===="+JSON.stringify(res.data.data))jweixin.config({debug: false,appId: res.data.data.appId,timestamp: res.data.data.timestamp,nonceStr: res.data.data.nonceStr,signature: res.data.data.signature,jsApiList: ['checkJsApi','getLocation']});//配置完成后，再执行分享等功能  if (callback) {callback(res.data);}}}).catch((err) => {console.log("微信signature失败"+err)})},//在需要自定义分享的页面中调用  share: function(data, url) {url = url ? url : window.location.href;if (!this.isWechat()) {return;}//每次都需要重新初始化配置，才可以进行分享  this.initJssdkShare(function(signData) {jweixin.ready(function() {var shareData = {title: data && data.title ? data.title : signData.site_name,desc: data && data.desc ? data.desc : signData.site_description,link: url,imgUrl: data && data.img ? data.img : signData.site_logo,success: function(res) {//用户点击分享后的回调，这里可以进行统计，例如分享送金币之类的  // post('/api/member/share');},cancel: function(res) {}};//分享给朋友接口  jweixin.onMenuShareAppMessage(shareData);//分享到朋友圈接口  jweixin.onMenuShareTimeline(shareData);});}, url);},//在需要定位页面调用location: function(callback) {if (!this.isWechat()) {console.log('不是微信客户端')return;}console.info('定位')this.initJssdk(function(res) {jweixin.ready(function() {console.info('定位ready')jweixin.getLocation({type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: function (res) {// console.log(res);callback(res)},fail:function(res){console.log(res)},// complete:function(res){//     console.log(res)// }});});});}
}

2、main.js加载该文件

// #ifdef H5
import wechat from './common/util/wechat'
if(wechat.isWechat()){Vue.prototype.$wechat =wechat;
}
// #endif

3、页面中使用

// #ifdef H5//获取定位经纬度if (this.$wechat && this.$wechat.isWechat()) {this.$wechat.location(function (res) {console.log(res)// let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90// let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。// todolet latitude = 31.14979;let longitude = 121.12426; //根据经纬度，解析区域，提示用户输入});}// #endif

二、逆地址解析

1、腾讯位置服务申请服务调用前提 KEY

2、引入vue-jsonp 解决腾讯位置服务跨域请求问题

npm install vue-jsonp --save

使用

import VueJsonp from 'vue-jsonp'

Vue.use(VueJsonp)

调用

this.$jsonp(url,{
                       key: this.publicKey,
                       location: locationObj
                       }).then(e => {
                           res(e.result);
                       })
                       .catch(err => {
                           res(err);
                       })

3、引入mimap组件自定义地图组件mi-map - DCloud 插件市场

qqmap-wx-jssdk.min.js 可从微信下载

<template><view class="server-place"><mapid='map'ref='map'v-bind:style="{height: mapH + 'px'}"style="width: 100%;" :latitude="latitude" :longitude="longitude":controls='controls'@regionchange='mapChange'></map><view class="map-tools"><view class="my-location" @click.stop="toMyLocation"><image class="left" src="/static/img/areame.png" mode=""></image><view class="right"><text class="title">我的位置</text><text class="text">{{myAddress}}</text></view></view><view class="start-place"><view class="place"><text class="title">{{tipText}}</text><text class="text">{{addressObj.address.formatted_addresses.recommend}}</text></view><view class="tip">{{descText}}</view><button @click.stop="submitAdress" class="sure" type="primary">确认选择</button></view></view></view></template><script>var jweixin = require('jweixin-module');const app = getApp()var QQMapWX = require('./qqmap-wx-jssdk.min.js')var qqmapsdk = new QQMapWX({key: 'LXCBZ-NNIKD-UZ64F-H6AFI-UNJLH-OCFGE' //app的key})// 'YVEBZ-JS7LF-PK2JW-JJNFX-BITHO-ATB57'export default {props: {tipText: {type: String,default: '选择位置'},descText: {type: String,default: '使用当前定位或在地图上标记位置'},},data() {return {publicKey:'',// h5的keymapH: 0,             // 地图高度，可在initMapH()中设置高度longitude: 0,        // 初始经度latitude: 0,         // 初始纬度myAddress: '',     // 初始地址信息addressObj: {        // 地图选点信息longitude: '',latitude: '',address: {address:'',formatted_addresses:{recommend:'请选择位置'}}},controls: [           // 地图中心点图标, 可更换iconPath, 详情见官方文档关于map组件的介绍{iconPath: '/static/img/areacenter.png',position: { // left: 175,left: window.screen.width/2-20,top: 210,width: 40, height: 40,},clickable: false}],};},mounted() {let _this = this_this.$api.getAddressKey({appId: uni.getStorageSync('hmAppId'),}).then(res=>{if(res.data.code == 10000){_this.publicKey=res.data.data.key;this.getLocation()this.initMapH()}}).catch(res=>{console.error("查询key失败: " + JSON.stringify(res));})},methods:{// 查询现在的位置getLocation() {let this_ = thisif (this.$wechat && this.$wechat.isWechat()) {this.$wechat.location(function (res) {console.log(res)let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。let res2={latitude: latitude ,longitude: longitude}this_.initMap(res2)//根据经纬度，解析区域，提示用户输入});}else{console.error("不在微信环境中")}},// 初始化我的位置async initMap(res) {this.longitude = res.longitude;this.latitude = res.latitude;this.addressObj = Object.assign({}, this.addressObj,{longitude: res.longitude,latitude: res.latitude,address: await this.getAddressName(res)})this.myAddress = this.addressObj.address.formatted_addresses.recommend},// 地图选择位置后 查询地点名称async checkMap(res) {this.addressObj = Object.assign({}, this.addressObj,{longitude: res.longitude,latitude: res.latitude,address: await this.getAddressName(res)})console.log('当前位置:' + res.latitude + '|' + res.longitude);},// 监听地图位置变化mapChange(e) {let that = thisclearTimeout(this.timer)this.timer = setTimeout(() => {if (e.type == 'end') {that.mapCtx = uni.createMapContext('map', this)that.mapCtx.getCenterLocation({success: res => {this.checkMap(res)},fail: err => {console.log(err);}})}}, 200)},// 查询地图中心点的名称getAddressName(addressObj) {return new Promise((res) => {// #ifdef APP-PLUSqqmapsdk.reverseGeocoder({location: {latitude: addressObj.latitude,longitude: addressObj.longitude},get_poi: 1,poi_options: "page_size=1;page_index=1",output: 'jsonp',success: (e) => {res(e.result.formatted_addresses.recommend);},fail: err => {res(err);}})// #endif// #ifndef APP-PLUS// ======================== jsonp跨域 ======================== let locationObj = addressObj.latitude+','+addressObj.longitudelet url = 'https://apis.map.qq.com/ws/geocoder/v1?coord_type=5&get_poi=1&output=jsonp&poi_options=page_size=1;page_index=1';this.$jsonp(url,{key: this.publicKey,location: locationObj}).then(e => {res(e.result);}).catch(err => {res(err);})// #endif})},// 计算地图的高度initMapH() {// #ifdef APP-PLUSthis.mapH = uni.getSystemInfoSync().windowHeight - 210;// #endif// #ifndef APP-PLUSthis.mapH = uni.getSystemInfoSync().windowHeight - 170;// #endif},// 移动到我的位置toMyLocation() {this.getLocation()},// 提交submitAdress() {this.controls = []setTimeout(() => {this.$emit('selectAddress', this.addressObj)}, 100)}},}
</script><style lang="scss" scoped>.server-place{position: fixed;left: 0;top: 0;height: 100vh;width: 100%;background: #ffffff;z-index: 999;.icon-img{width: 36px;height: 36px;display: block;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);margin-top: -70px;}.map-tools{position: fixed;width: 100%;bottom: 0rem;left: 0;padding-bottom: .5rem;display: flex;justify-content: center;align-items: center;flex-direction: column;.my-location{width: 90%;margin: 0 auto;height: 2.5rem;box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);background: #fff;border-radius: 0.5rem;display: flex;justify-content: flex-start;align-items: center;overflow: hidden;.left{background: #3384ff;// flex: 20%;width: 2.5rem;height: 100%;}.right{font-size: 0.57rem;margin-left: .5rem;color: #111;// flex: 80%;display: flex;justify-content: center;align-items: flex-start;flex-direction: column;.text{width: 12rem;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;color: #3384FF;margin-top: .3rem;}}}.start-place{width: 85%;margin: 0 auto;height: 5.5rem;margin: 0 auto;margin-top: .6rem;box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);background: #fff;border-radius: 0.5rem;padding: .5rem;.place{.title{font-size: 0.67rem;font-weight: bold;color: #111;}.text{font-size: 0.76rem;color: #3384FF;font-weight: bold;width: 12rem;vertical-align: middle;display: inline-block;margin-left: .5rem;overflow: hidden;white-space:nowrap;text-overflow: ellipsis;}}.tip{font-size: 0.57rem;color: #666;margin-top: .5rem;}.sure{margin-top: .5rem;color: #FFFFFF;background: #212121;font-weight: 600;}}}}
</style>

4、相关图标

文件分享

uniapp h5 位置选择，微信定位+腾讯位置服务获取当前地址，逆地址解析相关推荐

腾讯 Tars-Go 服务获取自定义模版（配置）值
Tars 模版是什么? 腾讯 Tars 框架中,有两种可以称之为 "配置" 的地方:其中一个是可以自定义的,在 Tars 管理页面中称为 "服务配置".在这里, ...
微信小程序开发之城市定位(腾讯位置服务)
微信小程序实现城市定位功能一.定位当前城市信息的步骤: 步骤1:获取当前地理位置,首先要拿到用户的授权 wx.openSeting 步骤2:调用 wx.getLocation获取当前用户的地理位置( ...
文件在计算机系统储存具体位置,电脑微信的文件储存位置怎么打开
电脑微信的文件储存位置怎么打开腾讯视频/爱奇艺/优酷/外卖充值4折起微信是我们现在经常使用的社交软件之一,在电脑上也可以使用微信软件,接下来小编就教大家怎样打开微信软件的文件储存位置. 具体如下 ...
app 隔几秒记录当前经纬度位置_uni-app获取位置经纬度并定位到当前位置
uni-app使用map组件定位到当前位置并进行标注 manifest.json添加如下内容: 需要定位的页面 style="width: 100vw; height: 100vh;&quo ...
位置信息、定位技术与位置服务
位置是物联网信息的重要属性之一,缺少位置的感知信息是没有实用价值的,位置服务采用定位技术 ,确定智能物体当前的地理位置,利用地理信息系统技术与移动通信技术,向物联网中的智能物体提供与其位置相关 ...
物联网-位置信息、定位技术与位置服务
位置信息与位置服务位置信息-从互联网到物联网位置信息在物联网中的作用位置信息是各种物联网应用系统能够实现服务功能的基础位置信息涵盖了空间.时间与对象三要素通过定位技术获取位置信息是物联网应用 ...
uniapp H5页面嵌入微信小程序 ios 下 video组件播放视频设置 border-radius overflow:hidden 不生效
在ios 系统中, 设置border-radius 可能会不生效(安卓有效),直接给要设置的元素设置 border-radius属性,再添加下面的代码即可实现功能: -webkit-backface- ...
php微信使用腾讯地图进行定位,微信定位+腾讯地图导航
var transferService = newqq.maps.TransferService({//location: "广州", complete: function (re ...
麒麟系统查看微信聊天记录位置、微信收到的文件位置
1.首先登录电脑微信 2.打开命令行先输入 sudo find / -mmin 1 | grep -v proc | grep wxid 不要按回车执行,等待1分钟左右不要执行其他动作 3.1分钟后通 ...

uniapp h5 位置选择，微信定位+腾讯位置服务获取当前地址，逆地址解析

我的网站：https://green.yuansu.space

一、获取当前地理坐标

二、逆地址解析

uniapp h5 位置选择，微信定位+腾讯位置服务获取当前地址，逆地址解析相关推荐

最新文章

热门文章