前段時間有個群友問起小程序地圖怎么點擊直接進行導航!剛好我也在網上查找了下相關代碼,整理了下,下面就是詳細的說明!

首先在wxml文件中輸入地圖代碼,相關內容自行查閱小程序開發教程

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

longitude:經度

latitude:緯度

markers:標記(這個要動態的傳遞數值,所以這里就使用{{markers}})

下面就是markers的數值傳遞,在page的data中設置markers數組的值

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

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

 

下一步操作就是怎么進行直接導航,這里使用微信自帶的導航組件wx.openLocation(相關內容自行查閱小程序開發教程)

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

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