欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp實(shí)現(xiàn)附近商家定位的示例代碼

 更新時(shí)間：2022年08月14日 15:23:44   作者：Abcdzzr  
本文主要介紹了uniapp實(shí)現(xiàn)附近商家定位的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

有一個(gè)月沒寫博客了，最近在寫項(xiàng)目，需要用到騰訊位置服務(wù)，獲取附近商家位置。這里我就記錄一下，實(shí)現(xiàn)過程。

一丶申請(qǐng)騰訊位置服務(wù)開發(fā)者密鑰

申請(qǐng)地址：騰訊位置服務(wù) - 立足生態(tài)，連接未來

官網(wǎng)教程：微信小程序JavaScript SDK | 騰訊位置服務(wù)

 點(diǎn)擊創(chuàng)建應(yīng)用，然后創(chuàng)建Key

這樣我們就獲得了key了 

二丶下載微信小程序JavaScriptSDK

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

三丶安全域名設(shè)置

安全域名設(shè)置，在小程序管理后臺(tái) -> 開發(fā) -> 開發(fā)管理 -> 開發(fā)設(shè)置 -> “服務(wù)器域名” 中設(shè)置request合法域名，添加https://apis.map.qq.com

 四丶代碼編寫

4.1丶項(xiàng)目配置

在項(xiàng)目中創(chuàng)建utils目錄將下載好JavaScriptSDK放入其中，并在uniapp中導(dǎo)入。

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

4.2丶定義變量

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

4.3丶編寫方法

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

4.4丶頁面加載時(shí)調(diào)用

created() {
    //判斷緩存是否存在附近門店信息有的話不加載
	if(uni.getStorageSync("markers")==''){
		this.getUserLocation();
	}
}

說明：附近的門店信息已經(jīng)被我們存入markers數(shù)組當(dāng)中了，并且按距離從小到大排列好的！

4.5丶數(shù)據(jù)展示

五丶真機(jī)調(diào)試效果圖

 到此這篇關(guān)于uniapp實(shí)現(xiàn)附近商家定位的示例代碼的文章就介紹到這了,更多相關(guān)uniapp 附近商家定位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論