前段時間有個群友問起小程序地圖怎么點擊直接進行導(dǎo)航！剛好我也在網(wǎng)上查找了下相關(guān)代碼，整理了下，下面就是詳細的說明！

首先在wxml文件中輸入地圖代碼，相關(guān)內(nèi)容自行查閱小程序開發(fā)教程

<map?class="maps"?id="map"?longitude="112.8977300000"?latitude="28.2174900000"?scale="16"?style="width:100%;height:500rpx;"?bindtap="mapclick"?markers="{{markers}}"></map>

longitude：經(jīng)度

latitude：緯度

markers：標記(這個要動態(tài)的傳遞數(shù)值，所以這里就使用{{markers}})

下面就是markers的數(shù)值傳遞，在page的data中設(shè)置markers數(shù)組的值

Page({
??data:?{
????markers:?[{
??????iconPath:?"/images/location.png",//定位圖標
??????id:?0,
??????latitude:?28.2174900000,//緯度
??????longitude:?112.8977300000,//經(jīng)度
??????width:?50,//圖標寬
??????height:?50,//圖標高
????}],
??},?
}）

這樣前端的地圖組件就定位完成！

下一步操作就是怎么進行直接導(dǎo)航，這里使用微信自帶的導(dǎo)航組件wx.openLocation(相關(guān)內(nèi)容自行查閱小程序開發(fā)教程)

首先在地圖上綁定一個事件,使用bindtap=”mapclick” 來綁定點擊地圖的操作事件mapclick,然后就是設(shè)置點擊事件。

mapclick:?function?()?{
????wx.openLocation({
??????latitude:?28.2174900000,//緯度
??????longitude:?112.8977300000,//經(jīng)度
??????scale:?18,//縮放
??????name:?'湖南翱云網(wǎng)絡(luò)科技有限公司',
??????address:?'湖南長沙岳麓區(qū)桐梓坡西路雅閣國際'
????})
??},

云部落資源網(wǎng)普通

打賞 收藏 海報 鏈接