亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

小程序獲取當(dāng)前位置所在的城市

來源:曲小強 發(fā)布時間:2018-07-02 15:29:05 閱讀量:1600

1、話不多說,直接上干貨

先來張目錄結(jié)構(gòu)

① index.wxml

<view class="retailStore"><view class="cnaps  borderBottom"><text>所在城市:</text><text class='m-bbt'>{{province}} {{city}}</text></view></view>

②index.js

插入提示:

1. 申請開發(fā)者密鑰(key):申請密鑰

2. 下載微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0           下載完成后放入utils文件夾下引用即可

3. 安全域名設(shè)置,在“設(shè)置” -> “開發(fā)設(shè)置”中設(shè)置request合法域名,添加https://apis.map.qq.com

測試用的話可以在微信開發(fā)工具中選擇詳情,如下圖


//index.js//獲取應(yīng)用實例const app = getApp();var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');var qqmapsdk;Page({data: {province: '',city: '',latitude: '',longitude: ''},onLoad: function () {qqmapsdk = new QQMapWX({key: 'xxxx-xxxx-xxxx-xxxx' //自己的key秘鑰 http://lbs.qq.com/console/mykey.html 在這個網(wǎng)址申請});},onShow: function () {let vm = this;vm.getUserLocation();},getUserLocation: function () {let vm = this;wx.getSetting({success: (res) => {console.log(JSON.stringify(res))// res.authSetting['scope.userLocation'] == undefined    表示 初始化進入該頁面// res.authSetting['scope.userLocation'] == false    表示 非初始化進入該頁面,且未授權(quán)// res.authSetting['scope.userLocation'] == true    表示 地理位置授權(quán)if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {wx.showModal({title: '請求授權(quán)當(dāng)前位置',content: '需要獲取您的地理位置,請確認授權(quán)',success: function (res) {if (res.cancel) {wx.showToast({title: '拒絕授權(quán)',icon: 'none',duration: 1000})} else if (res.confirm) {wx.openSetting({success: function (dataAu) {if (dataAu.authSetting["scope.userLocation"] == true) {wx.showToast({title: '授權(quán)成功',icon: 'success',duration: 1000})//再次授權(quán),調(diào)用wx.getLocation的APIvm.getLocation();} else {wx.showToast({title: '授權(quán)失敗',icon: 'none',duration: 1000})}}})}}})} else if (res.authSetting['scope.userLocation'] == undefined) {//調(diào)用wx.getLocation的APIvm.getLocation();}else {//調(diào)用wx.getLocation的APIvm.getLocation();}}})},// 微信獲得經(jīng)緯度getLocation: function () {let vm = this;wx.getLocation({type: 'wgs84',success: function (res) {console.log(JSON.stringify(res))var latitude = res.latitudevar longitude = res.longitudevar speed = res.speedvar accuracy = res.accuracy;vm.getLocal(latitude, longitude)},fail: function (res) {console.log('fail' + JSON.stringify(res))}})},// 獲取當(dāng)前地理位置getLocal: function (latitude, longitude) {let vm = this;qqmapsdk.reverseGeocoder({location: {latitude: latitude,longitude: longitude},success: function (res) {// console.log(JSON.stringify(res));let province = res.result.ad_info.provincelet city = res.result.ad_info.cityvm.setData({province: province,city: city,latitude: latitude,longitude: longitude})},fail: function (res) {console.log(res);},complete: function (res) {// console.log(res);}});}})

效果圖:


原文地址https://blog.csdn.net/quhongqiang/article/details/80853497

標簽: HTML JS 小程序
分享:
評論:
你還沒有登錄,請先