微信小程序?qū)崿F(xiàn)定位及到指定位置導航的示例代碼
更新時間:2019年08月20日 10:14:28 作者:huaweichenai
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)定位及到指定位置導航的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
一:實現(xiàn)定位及到指定位置導航所需組件及API
1:組件:map(地圖組件)
2:API:wx.getLocation(Object object)(獲取當前的地理位置、速度),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">導航</button> </view>
2:js
//js Page({ /** * 頁面的初始數(shù)據(jù) */ data: { //設置標記點 markers: [ { iconPath: "/images/ljx.png", id: 4, latitude: 31.938841, longitude: 118.799698, width: 30, height: 30 } ], //當前定位位置 latitude:'', longitude: '', }, navigate() { ////使用微信內(nèi)置地圖查看標記點位置,并進行導航 wx.openLocation({ latitude: this.data.markers[0].latitude,//要去的緯度-地址 longitude: this.data.markers[0].longitude,//要去的經(jīng)度-地址 }) }, onLoad() { //獲取當前位置 wx.getLocation({ type: 'gcj02', success: (res) => { console.log(res) this.setData({ latitude: res.latitude, longitude: res.longitude }) } }) } })
根據(jù)如上即可實現(xiàn)自身定位及到指定位置的導航,如下:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JavaScript在IE和Firefox(火狐)的不兼容問題解決方法小結(jié)
今天測試代碼時,發(fā)現(xiàn)不少IE可以運行的ajax,但在FF中報錯。IE和Firefox(火狐)在JavaScript方面的不兼容及統(tǒng)一方法總結(jié)如下,需要的朋友可以看下,對于以后的代碼書寫一定要考慮到多瀏覽器的兼容性。2010-04-04js+html5實現(xiàn)canvas繪制簡單矩形的方法
這篇文章主要介紹了js+html5實現(xiàn)canvas繪制簡單矩形的方法,涉及html5圖形繪制的基本技巧,需要的朋友可以參考下2015-06-06