微信小程序?qū)崿F(xiàn)定位及到指定位置導(dǎo)航的示例代碼
更新時間：2019年08月20日 10:14:28 作者：huaweichenai
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)定位及到指定位置導(dǎo)航的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一：實現(xiàn)定位及到指定位置導(dǎo)航所需組件及API
1：組件：map(地圖組件)
2：API：wx.getLocation(Object object)(獲取當(dāng)前的地理位置、速度)，wx.openLocation(Object object)(使用微信內(nèi)置地圖查看位置)
二：代碼實現(xiàn)
1：wxml
<view>
<map id="map"
longitude="{{longitude}}"
latitude="{{latitude}}"
scale="14"
markers="{{markers}}"
bindmarkertap="markertap"
bindregionchange="regionchange"
show-location
style="width: 100%; height: 300px;"
>
</map>
</view>
<view>
<button type="primary" bindtap="navigate">導(dǎo)航</button>
</view>
2：js
//js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
//設(shè)置標(biāo)記點
markers: [
{
iconPath: "/images/ljx.png",
id: 4,
latitude: 31.938841,
longitude: 118.799698,
width: 30,
height: 30
}
],
//當(dāng)前定位位置
latitude:'',
longitude: '',
},
navigate() {
////使用微信內(nèi)置地圖查看標(biāo)記點位置，并進行導(dǎo)航
wx.openLocation({
latitude: this.data.markers[0].latitude,//要去的緯度-地址
longitude: this.data.markers[0].longitude,//要去的經(jīng)度-地址
})
},
onLoad() {
//獲取當(dāng)前位置
wx.getLocation({
type: 'gcj02',
success: (res) => {
console.log(res)
this.setData({
latitude: res.latitude,
longitude: res.longitude
})
}
})
}
})
根據(jù)如上即可實現(xiàn)自身定位及到指定位置的導(dǎo)航，如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實現(xiàn)網(wǎng)頁上的浮動廣告的簡單方法
JavaScript實現(xiàn)網(wǎng)頁上的浮動廣告的簡單方法，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了JS中如何將base64轉(zhuǎn)換成file的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
移動端Ionic App 資訊上下循環(huán)滾動的實現(xiàn)代碼(跑馬燈效果)
這篇文章主要介紹了移動端Ionic App 資訊上下循環(huán)滾動的實現(xiàn)代碼，實現(xiàn)方法需要借助jQuery庫的選擇器和動畫函數(shù)，并且把jquery的操作封裝到指令里，具體指令代碼大家通過本文學(xué)習(xí)吧2017-08-08
這篇文章主要介紹了微信小程序上線發(fā)布流程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了JS實現(xiàn)換膚功能的方法,結(jié)合實例形式分析了javascript針對頁面元素屬性與樣式動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
JavaScript實現(xiàn)事件的中斷傳播和行為阻止方法示例
這篇文章主要給大家介紹了利用JavaScript實現(xiàn)事件的中斷傳播和行為阻止的方法示例，文中給出了詳細(xì)的介紹和示例代碼，相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，需要的朋友們下面來一起看看吧。2017-01-01
在JavaScript中構(gòu)建ArrayList示例代碼
這篇文章主要介紹了在JavaScript中構(gòu)建ArrayList，很實用,需要的朋友可以參考下2014-09-09
所謂閉包，值得是詞法表示包括不必要計算的變量的函數(shù)，也就是說，該函數(shù)可以使用函數(shù)外定義的變量。2010-08-08
開發(fā)Echarts圖標(biāo)時經(jīng)常遇到數(shù)據(jù)量過多引起的圖例錯亂,這個時候我們應(yīng)該如何處理?下面這篇文章主要給大家介紹了關(guān)于echarts圖例過多顯示問題的解決方案,需要的朋友可以參考下2023-11-11
使用localForage實現(xiàn)帶過期時間的本地存儲方案
在前端開發(fā)中,我們經(jīng)常需要將數(shù)據(jù)存儲在客戶端,以減少網(wǎng)絡(luò)請求次數(shù),提高用戶體驗,localStorage 和 sessionStorage 是常用的存儲方案,但它們有一些局限性,為了解決這些問題,本文將介紹如何使用 localForage 實現(xiàn)一個帶過期時間的本地存儲方案,需要的朋友可以參考下2024-09-09