85307360 2019-06-27
起始页wxml
<view class="company-adress"> <view class="weui-loadmore weui-loadmore_line"> <view class="weui-loadmore__tips weui-loadmore__tips_in-line">公司地址</view> </view> <block wx:for="{{place}}" wx:key='index'> <view class="weui-media-box weui-media-box_text" bindtap="openMap" data-index="{{index}}"> <image class="pos-icon" src="../../youzan-image/pos.png"></image> <view class="weui-media-box__title weui-media-box__title_in-text">{{item.shortAddress}}</view> <view class="weui-cell__ft weui-cell__ft_in-access"></view> <view class="weui-media-box__desc">{{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 class="container"> <map class="Map" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" controls="{{controls}}" show-location markers="{{markers}}" bindcontroltap="backToMyposition"> <cover-view class="footer"> <cover-view class="detail">{{shortAddress}}{{detailAddress}}</cover-view> </cover-view> </map> </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, }) } }) } })