map組件使用
需求
點擊不同的地方，跳轉到地圖上該地方的位置在目標位置上有顯示目標位置的小圖標右下角有個回到當前位置的控件，點擊後返回到當前位置將文本輸入到地圖頁面底部解決？
在外部父級view上綁定索引index,通過e.currentTarget.dataset.index獲取到當前點擊的地方，然後通過url傳遞index過去，map組件通過onLoad接收點擊的index,再通過id查詢數據，並動態賦值；給markers標記點傳遞經緯度；controls控件 bindcontroltap事件地圖優先級最高，只能使用cover-view顯示文本具體實現
起始頁wxml
<view> <view> <view>公司地址/<view> /<view> <block> <view> <image> <view>{{item.shortAddress}}/<view> <view> <view>{{item.detailAddress}}/<view> /<view> /<block> /<view>
起始頁事件js
openMap:function (e) { let index = e.currentTarget.dataset.index; wx.navigateTo({ url: `/pages/map/map?id=${index}`, }) },
跳轉地圖頁wxml
<view> <cover-view> <cover-view>{{shortAddress}}{{detailAddress}}/<cover-view> /<cover-view> /<view>
跳轉地圖頁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, }) } }) }})