uniapp實現附近商傢定位的示例代碼

Posted on by

有一個月沒寫博客瞭，最近在寫項目，需要用到騰訊位置服務，獲取附近商傢位置。這裡我就記錄一下，實現過程。

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

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

官網教程：微信小程序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 附近商傢定位內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：