uniapp實現附近商家定位的範例程式碼

2022-08-14 18:02:11

一丶申請騰訊位置服務開發者金鑰

申請地址：騰訊位置服務 - 立足生態，連線未來

官網教學：微信小程式JavaScript SDK | 騰訊位置服務

點選建立應用，然後建立Key

這樣我們就獲得了key了

二丶下載微信小程式JavaScriptSDK

下載連結： https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip

三丶安全域名設定

安全域名設定，在小程式管理後臺 -> 開發 -> 開發管理 -> 開發設定 -> “伺服器域名” 中設定request合法域名，新增https://apis.map.qq.com

四丶程式碼編寫

4.1丶專案設定

在專案中建立utils目錄將下載好JavaScriptSDK放入其中，並在uniapp中匯入。

	import QQMapWX from '@/utils/qqmap-wx-jssdk.js'
	const qqmapsdk = new QQMapWX({
        //填寫你申請的key
		key: 'XXXXX-A466V-XXXXX-XXXXX-XXXXX-XXXXX'
	})

4.2丶定義變數

export default {
		data() {
			return {
				//商家列表
				markers:[],
				//自身經緯度
				from:{},
				//頁碼值
				page_index: 1,
				//每頁顯示多少條資料
				page_size: 10,
				//分頁總條數
				total:100,
			}
 
		},

4.3丶編寫方法

export default {
		data() {
			return {
				//商家列表
				markers:[],
				//自身經緯度
				from:{},
				//頁碼值
				page_index: 1,
				//每頁顯示多少條資料
				page_size: 10,
				//分頁總條數
				total:100,
			}
 
		},

4.4丶頁面載入時呼叫

created() {
    //判斷快取是否存在附近門店資訊有的話不載入
	if(uni.getStorageSync("markers")==''){
		this.getUserLocation();
	}
}

說明：附近的門店資訊已經被我們存入markers陣列當中了，並且按距離從小到大排列好的！

4.5丶資料展示

五丶真機偵錯效果圖

到此這篇關於uniapp實現附近商家定位的範例程式碼的文章就介紹到這了,更多相關uniapp 附近商家定位內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！