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




