來源:曲小強 發(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