map組件使用

需求

• 點擊不同的地方，跳轉到地圖上該地方的位置
• 在目標位置上有顯示目標位置的小圖標
• 右下角有個回到當前位置的控件，點擊後返回到當前位置
• 將文本輸入到地圖頁面底部

解決？

1. 在外部父級view上綁定索引index,通過e.currentTarget.dataset.index獲取到當前點擊的地方，然後通過url傳遞index過去，map組件通過onLoad接收點擊的index,再通過id查詢數據，並動態賦值；
2. 給markers標記點傳遞經緯度；
3. controls控件 bindcontroltap事件
4. 地圖優先級最高，只能使用cover-view顯示文本

具體實現

起始頁wxml

   公司地址      
{{item.shortAddress}}  {{item.detailAddress}}   

起始頁事件js

 openMap:function (e) { let index = e.currentTarget.dataset.index; wx.navigateTo({ url: `/pages/map/map?id=${index}`, })  },

跳轉地圖頁wxml

跳轉地圖頁wxss

.container { width: 100%; height: 100vh;}.Map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1;}.footer { position: fixed; bottom: 0; width: 100%; height: 200rpx; background-color: #fff;}.detail { display: block; width: 100%; float: left; padding-left: 15rpx; padding-top: 20rpx; bottom: 30rpx; word-wrap: break-word; font-size: 17px; color: #020202;}

跳轉地圖頁js

import address from '../../api/address'const app = getApp()Page({ data: { latitude: '', longitude:'', shortAddress:'', detailAddress:'', scale: 18, controls: [], markers:[], }, onLoad: function (options) { const id = options.id; this.setData({ latitude:address[id].latitude, longitude:address[id].longitude, shortAddress: address[id].shortAddress, detailAddress: address[id].detailAddress, controls: [{ id: 0, iconPath: '../../youzan-image/back.png', position: { left:330, top:450, width:30, height:30, }, clickable: true }], markers:[{ iconPath: '../../youzan-image/position.png', id: 0, latitude: address[id].latitude, longitude: address[id].longitude, width: 20, height: 20 }] }) }, backToMyposition(e){ wx.getLocation({ type: 'gcj02', success: (res) => { console.log(res.latitude, res.longitude); this.setData({ latitude: res.latitude, longitude: res.longitude, scale: 18, }) } }) }})

閱讀更多 程序員成長記 的文章

關鍵字: 組件 Line Word