微信小程序實現定位及到指定位置導航的示例代碼
更新時間：2019年08月20日 10:14:28 作者：huaweichenai
這篇文章主要介紹了微信小程序實現定位及到指定位置導航的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
一：實現定位及到指定位置導航所需組件及API
1：組件：map(地圖組件)
2：API：wx.getLocation(Object object)(獲取當前的地理位置、速度)，wx.openLocation(Object object)(使用微信內置地圖查看位置)
二：代碼實現
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({
/**
* 頁面的初始數據
*/
data: {
//設置標記點
markers: [
{
iconPath: "/images/ljx.png",
id: 4,
latitude: 31.938841,
longitude: 118.799698,
width: 30,
height: 30
}
],
//當前定位位置
latitude:'',
longitude: '',
},
navigate() {
////使用微信內置地圖查看標記點位置，并進行導航
wx.openLocation({
latitude: this.data.markers[0].latitude,//要去的緯度-地址
longitude: this.data.markers[0].longitude,//要去的經度-地址
})
},
onLoad() {
//獲取當前位置
wx.getLocation({
type: 'gcj02',
success: (res) => {
console.log(res)
this.setData({
latitude: res.latitude,
longitude: res.longitude
})
}
})
}
})
根據如上即可實現自身定位及到指定位置的導航，如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在TypeScript里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。本文將詳細介紹TypeScript接口的相關知識。2017-03-03
JavaScript在IE和Firefox(火狐)的不兼容問題解決方法小結
今天測試代碼時，發(fā)現不少IE可以運行的ajax，但在FF中報錯。IE和Firefox(火狐)在JavaScript方面的不兼容及統(tǒng)一方法總結如下，需要的朋友可以看下，對于以后的代碼書寫一定要考慮到多瀏覽器的兼容性。2010-04-04
這篇文章主要介紹了js+html5實現canvas繪制簡單矩形的方法,涉及html5圖形繪制的基本技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了簡單了解JavaScript中常見的反模式，反模式 是指對反復出現的設計問題的常見的無力而低效的設計模式，俗話說就是重蹈覆轍。 這篇文章描述了 JavaScript 中常見的一些反模式，以及避免它們的辦法。,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了微信小程序獲取用戶openid的實現，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了利用cookies設置每隔24小時彈出框的實例代碼,需要的朋友可以參考下2017-04-04
主頁用frameset嵌了兩個頁面，左側為菜單欄，可以通過改變 frameset的cols來收縮。別的瀏覽器正常，但IE10卻沒任何的反應2014-01-01
這篇文章主要為大家詳細介紹了微信小程序實現驗證碼倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了詳解微信小程序支付流程與梳理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
這篇文章主要介紹了如何利用ES6進行Promise封裝總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02