前段時間有個群友問起小程序地圖怎么點擊直接進行導航!剛好我也在網上查找了下相關代碼,整理了下,下面就是詳細的說明!
首先在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:?'湖南長沙岳麓區桐梓坡西路雅閣國際' ????}) ??},
聲明:本站所有文章,如無特殊說明或標注,均為本站原創發布。任何個人或組織,在未征得本站同意時,禁止復制、盜用、采集、發布本站內容到任何網站、書籍等各類媒體平臺。如若本站內容侵犯了原著者的合法權益,可聯系我們進行處理。