uniapp 微信對接地圖的三種操作

来源:https://www.cnblogs.com/smileZAZ/archive/2022/11/09/16874795.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 1.uni.getLocation 獲取當前經維度 先上代碼 let that = this // 獲取用戶是否開啟 授權獲取當前的地理位置、速度的許可權。 uni.getSetting({ success (res) { console. ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

1.uni.getLocation 獲取當前經維度

 先上代碼

  let that = this
                // 獲取用戶是否開啟 授權獲取當前的地理位置、速度的許可權。
                uni.getSetting({
                    success (res) {
                        console.log(res)
                        // 如果沒有授權
                        if (!res.authSetting['scope.userLocation']) {
                            // 則拉起授權視窗
                            uni.authorize({
                                scope: 'scope.userLocation',
                                success () {
                                //點擊允許後--就一直會進入成功授權的回調 就可以使用獲取的方法了
                                    uni.getLocation({
                                        type: 'wgs84',
                                        success: function (res) {
                                            that.longitude = res.longitude
                                            that.latitude = res.latitude
                                            let jinweidu = {
                                                longitude: res.longitude,
                                                latitude: res.latitude,
                                            }
                                            uni.setStorageSync('jinweidu', jinweidu);
                                            console.log(res)
                                            console.log('當前位置的經度:' + res.longitude)
                                            console.log('當前位置的緯度:' + res.latitude)
                                            that.getlist()
                                        }, fail (error) {
                                            uni.showToast({
                                                title: '獲取地址失敗,請檢查手機是否打開定位功能,未打開將導致部分功能不可用',
                                                icon:'none'
                                            });
                                        }
                                    })
                                },
                                fail (error) {
                                    //點擊了拒絕授權後--就一直會進入失敗回調函數--此時就可以在這裡重新拉起授權視窗
                                    console.log('拒絕授權', error)
                                    uni.showModal({
                                        title: '提示',
                                        content: '若點擊不授權,將無法使用位置功能',
                                        showCancel: false,
                                        // cancelText: '不授權',
                                        // cancelColor: '#999',
                                        confirmText: '授權',
                                        confirmColor: '#f94218',
                                        success (res) {
                                            console.log(res)
                                            if (res.confirm) {
                                                // 選擇彈框內授權
                                                uni.openSetting({
                                                    success (res) {
                                                        console.log(res.authSetting)
                                                    }
                                                })
                                            } else if (res.cancel) {
                                                // 選擇彈框內 不授權
                                                console.log('用戶點擊不授權')
                                            }
                                        }
                                    })
                                }
                            })
                        } else {
                            // 有許可權則直接獲取
                            uni.getLocation({
                                type: 'wgs84',
                                success: function (res) {
                                    that.longitude = res.longitude
                                    that.latitude = res.latitude
                                    let jinweidu = {
                                        longitude: res.longitude,
                                        latitude: res.latitude,
                                    }
                                    uni.setStorageSync('jinweidu', jinweidu);
                                    console.log(res)
                                    console.log('當前位置的經度1:' + res.longitude)
                                    console.log('當前位置的緯度1:' + res.latitude)
                                    that.getlist()
                                }, fail (error) {
                                    uni.showToast({
                                        title: '獲取地址失敗,請檢查手機是否打開定位功能,未打開將導致部分功能不可用',
                                        icon:'none'
                                    });
                                    console.log('失敗', error)
                                }
                            })
                        }
                    }
                })
            
            }

將此方法放到onLoad生命周期內,第一次進入頁面會出現授權彈窗(如下圖)

  點擊允許就可以獲取到經緯度了

 如果拒絕授權位置信息的話就會出現彈窗進行提醒,提醒內容可以自己更改。

 這個時候點擊彈窗的授權會進入設置頁面,允許位置信息再返回就可以獲取到經緯度了

特別註意:

uni.openSetting調起客戶端小程式設置界面,返回用戶設置的操作結果,此api只能在小程式中使用

uni.authorize查看是否已授權api只能在微信、百度、位元組、飛書、快手、QQ小程式中使用。

且需要在微信平臺開通,併在配置文件里設置

		"usingComponents": true,
		"permission": {
			"scope.userLocation": {
				"desc": "你的位置信息將用於和門店的距離長度"
			}
		},
		"requiredPrivateInfos": [
			"getLocation",
			"chooseLocation"
		]

2.uni.chooseLocation 調起微信小程式 獲取詳細地址

先看代碼

getMapLocation(){
	uni.chooseLocation({
		success:(res)=> {
			console.log(res);
			// this.getRegionFn(res);
		},
		fail:()=>{
			// 如果用uni.chooseLocation沒有獲取到地理位置,則需要獲取當前的授權信息,判斷是否有地理授權信息
			uni.getSetting({
				success: (res) => {
					console.log(res);
					var status = res.authSetting;
					if(!status['scope.userLocation']){
					// 如果授權信息中沒有地理位置的授權,則需要彈窗提示用戶需要授權地理信息
						uni.showModal({
							title:"是否授權當前位置",
							content:"需要獲取您的地理位置,請確認授權,否則地圖功能將無法使用",
							success:(tip)=>{
								if(tip.confirm){
								// 如果用戶同意授權地理信息,則打開授權設置頁面,判斷用戶的操作
									uni.openSetting({
										success:(data)=>{
										// 如果用戶授權了地理信息在,則提示授權成功
											if(data.authSetting['scope.userLocation']===true){
												uni.showToast({
													title:"授權成功",
													icon:"success",
													duration:1000
												})
												// 授權成功後,然後再次chooseLocation獲取信息
												uni.chooseLocation({
													success: (res) => {
														console.log("詳細地址",res);
														// this.getRegionFn(res);
													}
												})
											}else{
												uni.showToast({
													title:"授權失敗",
													icon:"none",
													duration:1000
												})
											}
										}
									})
								}
							}
						})
					}
				},
				fail: (res) => {
					uni.showToast({
						title:"調用授權視窗失敗",
						icon:"none",
						duration:1000
					})
				}
			})
		}
	});
},

授權成功後,就可以進入到uniapp自帶的選擇地點的頁面了,可以直接選取/拖動地圖選取/搜索地點選取等多種方式實現地點的選擇,頁面真的是很好看啊。完全長在了我的審美點上。哈哈。

唯一的缺點就是,這個預設使用的騰訊地圖,但是騰訊地圖檢索不是很精確,不如高德。

註意:使用uni.chooseLocation時,地圖載入但附近地址列表不載入問題

 

 與應用的sha1一致

3.uni.openLocation 調起微信小程式 打開詳細地址

先上代碼

//查看內置地圖 (導航)  註意:經緯度必須轉換為number類型,不然就...哈哈哈
goMap(item){
  // console.log(item) 
   uni.openLocation({
     latitude: Number(item.take.mer_take_location[0]), 
     longitude: Number(item.take.mer_take_location[1]),
     name: item.take.mer_take_address,
     success() {
         console.log('success');
     }
   });
 }

使用後效果如下

本文部分轉載於:

https://blog.csdn.net/lovewangyage/article/details/127660148

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • PasteNow mac是一款強大的剪貼板工具,該軟體使你的日常工作更輕鬆和快捷。你可以通過它存儲各種各樣的臨時數據:文本、鏈接、圖像等等,功能非常的豐富。 詳情:PasteNow for Mac 功能特色 - 在多台設備同步數據 - 創建智能列表以更方便地過濾數據 - 支持各種風格不同的列表樣式 ...
  • EdgeView 3是一款運行在Mac系統上的圖片查看器,不僅可以打開JPEG、PNG、TIFF、BMP、DSlr、Eps、PDF、AI(Adobe illustrator)的RAW文件等各種圖像文件,還可以直接打開存檔中的圖像文件,無需提取。 詳情:EdgeView 3 for Mac 亮點特征: ...
  • TEE學習(一) OP-TEE OP-TEE CONCEPT OP-TEE(open source project Trusted Execution Environment),REE中的系統和應用無法直接訪問TEE中的資源,只能通過TEE提供的介面獲取一個結果。 main design goals ...
  • MergeTree擁有主鍵,但是它的主鍵卻沒有唯一鍵的約束。這意味著即便多行數據的主鍵相同,它們還是能夠被正常寫入。在某些使用場合,用戶並不希望數據表中含有重覆的數據。ReplacingMergeTree就是在這種背景下為了數據去重而設計的,它能夠在合併分區時刪除重覆的數據。但是ReplacingM ...
  • 課件獲取:關註公眾號 “數棧研習社”,後臺私信 “ChengYing” 獲得直播課件 視頻回放:點擊這裡 ChengYing 開源項目地址:github 丨 gitee 喜歡我們的項目給我們點個__ STAR!STAR!!STAR!!!(重要的事情說三遍)__ 技術交流釘釘 qun:30537511 ...
  • 不知不覺間,2022年的腳步已經走到了倒數第二個月。臨近年末,我們對產品本身以及客戶反饋的一些問題進行了持續的更新和優化,例如基線告警、數據服務平臺新增TDengine 數據源支持、行級許可權根據用戶屬性實現動態賦權。 以下為袋鼠雲產品功能更新報告第二期內容,更多探索,請繼續閱讀。 數棧DTinsig ...
  • 數據也有冷熱之分,你知道嗎? 根據訪問的頻率的高低可將數據分為熱數據和冷數據,訪問頻率高的則為熱數據,低為冷數據。如果熱、冷數據不區分,一併存儲,顯然不科學。將冷數據也存儲在昂貴的記憶體中,那麼你想,成本得多高呢? 有趣的是,根據我們實際的觀察,目前很多使用 Redis 的業務就是這樣操作的。 得益於 ...
  • 這本書去年11月出的,今年中文版也出了,並且直接上了微信讀書,之後有空就讀一讀,分享下讀書筆記~ 原文內容比較充實,建議有時間可以讀一下原文. 第一章主要是個概覽. MySQL的邏輯架構 預設情況下,每個客戶端連接都會在伺服器進程中擁有一個線程,該連接的查詢只會在這個單獨的線程中執行,該線程駐留在一 ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...