快捷導(dǎo)航

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

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

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)定位及到指定位置導(dǎo)航的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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({
/**
  * 頁面的初始數(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)航，如下：

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

您可能感興趣的文章:

相關(guān)文章

TypeScript入門-接口
在TypeScript里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。本文將詳細(xì)介紹TypeScript接口的相關(guān)知識(shí)。
2017-03-03
JavaScript在IE和Firefox(火狐)的不兼容問題解決方法小結(jié)
今天測(cè)試代碼時(shí)，發(fā)現(xiàn)不少IE可以運(yùn)行的ajax，但在FF中報(bào)錯(cuò)。IE和Firefox(火狐)在JavaScript方面的不兼容及統(tǒng)一方法總結(jié)如下，需要的朋友可以看下，對(duì)于以后的代碼書寫一定要考慮到多瀏覽器的兼容性。
2010-04-04
js+html5實(shí)現(xiàn)canvas繪制簡單矩形的方法
這篇文章主要介紹了js+html5實(shí)現(xiàn)canvas繪制簡單矩形的方法,涉及html5圖形繪制的基本技巧,需要的朋友可以參考下
2015-06-06
簡單了解JavaScript中常見的反模式
這篇文章主要介紹了簡單了解JavaScript中常見的反模式，反模式是指對(duì)反復(fù)出現(xiàn)的設(shè)計(jì)問題的常見的無力而低效的設(shè)計(jì)模式，俗話說就是重蹈覆轍。這篇文章描述了 JavaScript 中常見的一些反模式，以及避免它們的辦法。,需要的朋友可以參考下
2019-06-06
微信小程序獲取用戶openid的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序獲取用戶openid的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
JS利用cookies設(shè)置每隔24小時(shí)彈出框
這篇文章主要介紹了利用cookies設(shè)置每隔24小時(shí)彈出框的實(shí)例代碼,需要的朋友可以參考下
2017-04-04
淺析IE10兼容性問題(frameset的cols屬性)
主頁用frameset嵌了兩個(gè)頁面，左側(cè)為菜單欄，可以通過改變 frameset的cols來收縮。別的瀏覽器正常，但I(xiàn)E10卻沒任何的反應(yīng)
2014-01-01
微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)驗(yàn)證碼倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
詳解微信小程序支付流程與梳理
這篇文章主要介紹了詳解微信小程序支付流程與梳理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
如何利用ES6進(jìn)行Promise封裝總結(jié)
這篇文章主要介紹了如何利用ES6進(jìn)行Promise封裝總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02