微信小程序?qū)崿F(xiàn)定位及到指定位置導(dǎo)航的示例代碼

更新時(shí)間：2019年08月20日 10:14:28 作者：huaweichenai

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)定位及到指定位置導(dǎo)航的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一：實(shí)現(xiàn)定位及到指定位置導(dǎo)航所需組件及API

1：組件：map(地圖組件)

2：API：wx.getLocation(Object object)(獲取當(dāng)前的地理位置、速度)，wx.openLocation(Object object)(使用微信內(nèi)置地圖查看位置)

二：代碼實(shí)現(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({
/**
  * 頁(yè)面的初始數(shù)據(jù)
  */
data: {
//設(shè)置標(biāo)記點(diǎn)
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)記點(diǎn)位置，并進(jìn)行導(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ù)如上即可實(shí)現(xiàn)自身定位及到指定位置的導(dǎo)航，如下：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)上的浮動(dòng)廣告的簡(jiǎn)單方法
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)上的浮動(dòng)廣告的簡(jiǎn)單方法，需要的朋友可以參考一下
2013-06-06
JS中如何將base64轉(zhuǎn)換成file
這篇文章主要介紹了JS中如何將base64轉(zhuǎn)換成file的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
移動(dòng)端Ionic App 資訊上下循環(huán)滾動(dòng)的實(shí)現(xiàn)代碼(跑馬燈效果)
這篇文章主要介紹了移動(dòng)端Ionic App 資訊上下循環(huán)滾動(dòng)的實(shí)現(xiàn)代碼，實(shí)現(xiàn)方法需要借助jQuery庫(kù)的選擇器和動(dòng)畫(huà)函數(shù)，并且把jquery的操作封裝到指令里，具體指令代碼大家通過(guò)本文學(xué)習(xí)吧
2017-08-08
微信小程序上線發(fā)布流程圖文詳解
這篇文章主要介紹了微信小程序上線發(fā)布流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
JS實(shí)現(xiàn)換膚功能的方法實(shí)例詳解
這篇文章主要介紹了JS實(shí)現(xiàn)換膚功能的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)頁(yè)面元素屬性與樣式動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-01-01
JavaScript實(shí)現(xiàn)事件的中斷傳播和行為阻止方法示例
這篇文章主要給大家介紹了利用JavaScript實(shí)現(xiàn)事件的中斷傳播和行為阻止的方法示例，文中給出了詳細(xì)的介紹和示例代碼，相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-01-01
在JavaScript中構(gòu)建ArrayList示例代碼
這篇文章主要介紹了在JavaScript中構(gòu)建ArrayList，很實(shí)用,需要的朋友可以參考下
2014-09-09
javascript閉包的理解和實(shí)例
所謂閉包，值得是詞法表示包括不必要計(jì)算的變量的函數(shù)，也就是說(shuō)，該函數(shù)可以使用函數(shù)外定義的變量。
2010-08-08
echarts圖例過(guò)多顯示問(wèn)題解決方案
開(kāi)發(fā)Echarts圖標(biāo)時(shí)經(jīng)常遇到數(shù)據(jù)量過(guò)多引起的圖例錯(cuò)亂,這個(gè)時(shí)候我們應(yīng)該如何處理?下面這篇文章主要給大家介紹了關(guān)于echarts圖例過(guò)多顯示問(wèn)題的解決方案,需要的朋友可以參考下
2023-11-11
使用localForage實(shí)現(xiàn)帶過(guò)期時(shí)間的本地存儲(chǔ)方案
在前端開(kāi)發(fā)中,我們經(jīng)常需要將數(shù)據(jù)存儲(chǔ)在客戶端,以減少網(wǎng)絡(luò)請(qǐng)求次數(shù),提高用戶體驗(yàn),localStorage 和 sessionStorage 是常用的存儲(chǔ)方案,但它們有一些局限性,為了解決這些問(wèn)題,本文將介紹如何使用 localForage 實(shí)現(xiàn)一個(gè)帶過(guò)期時(shí)間的本地存儲(chǔ)方案,需要的朋友可以參考下
2024-09-09