uniapp實現(xiàn)附近商家定位的示例代碼
有一個月沒寫博客了，最近在寫項目，需要用到騰訊位置服務(wù)，獲取附近商家位置。這里我就記錄一下，實現(xiàn)過程。
一丶申請騰訊位置服務(wù)開發(fā)者密鑰
申請地址：騰訊位置服務(wù) - 立足生態(tài)，連接未來
官網(wǎng)教程：微信小程序JavaScript SDK | 騰訊位置服務(wù)
點擊創(chuàng)建應(yīng)用，然后創(chuàng)建Key
這樣我們就獲得了key了
二丶下載微信小程序JavaScriptSDK
下載鏈接： https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip
三丶安全域名設(shè)置
安全域名設(shè)置，在小程序管理后臺 -> 開發(fā) -> 開發(fā)管理 -> 開發(fā)設(shè)置 -> “服務(wù)器域名” 中設(shè)置request合法域名，添加https://apis.map.qq.com
四丶代碼編寫
4.1丶項目配置
在項目中創(chuàng)建utils目錄將下載好JavaScriptSDK放入其中，并在uniapp中導(dǎo)入。
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:[],
//自身經(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丶頁面加載時調(diào)用
created() {
//判斷緩存是否存在附近門店信息有的話不加載
if(uni.getStorageSync("markers")==''){
this.getUserLocation();
}
}說明：附近的門店信息已經(jīng)被我們存入markers數(shù)組當(dāng)中了，并且按距離從小到大排列好的！
4.5丶數(shù)據(jù)展示
五丶真機調(diào)試效果圖
到此這篇關(guān)于uniapp實現(xiàn)附近商家定位的示例代碼的文章就介紹到這了,更多相關(guān)uniapp 附近商家定位內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
three.js是一款webGL框架，由于其易用性被廣泛應(yīng)用。接下來通過本文給大家分享three.js加載obj模型的實例代碼，需要的朋友參考下吧2017-11-11
下面小編就為大家?guī)硪黄狫S中多種方式創(chuàng)建對象詳解。小編覺得挺不錯的?，F(xiàn)在分享給大家，給大家一個參考。一起跟隨小編過來看看吧2016-03-03
在實例中重學(xué)JavaScript事件循環(huán)
這篇文章主要介紹了在實例中重學(xué)JavaScript事件循環(huán)，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-12-12
下面小編就為大家?guī)硪黄褂肑S實現(xiàn)圖片輪播的實例(前后首尾相接)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
對存在JavaScript隱式類型轉(zhuǎn)換的四種情況的總結(jié)(必看篇)
下面小編就為大家?guī)硪黄獙Υ嬖贘avaScript隱式類型轉(zhuǎn)換的四種情況的總結(jié)(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
基于javascript實現(xiàn)貪吃蛇經(jīng)典小游戲
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
利用JavaScript控制元素(標(biāo)簽)的顯示與隱藏
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript控制元素(標(biāo)簽)的顯示與隱藏的相關(guān)資料,JavaScript有多種方式可以實現(xiàn),文中介紹了三種方法以及區(qū)別,需要的朋友可以參考下2023-07-07
js實現(xiàn)點擊按鈕后給Div圖層設(shè)置隨機背景顏色的方法
這篇文章主要介紹了js實現(xiàn)點擊按鈕后給Div圖層設(shè)置隨機背景顏色的方法,實例分析了javascript操作頁面div元素屬性及隨機數(shù)的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了JS中dom0級事件和dom2級事件的區(qū)別介紹，非常有參考價值，特此分享到腳本之家平臺供大家參考2016-05-05
js實現(xiàn)Select列表內(nèi)容自動滾動效果代碼
這篇文章主要介紹了js實現(xiàn)Select列表內(nèi)容自動滾動效果的方法,涉及javascript簡單遞歸調(diào)用遍歷select及時間函數(shù)的相關(guān)使用技巧,需要的朋友可以參考下2015-08-08