| | |
| | | :latitude="latitude" |
| | | :longitude="longitude" |
| | | :markers="markers"></map> |
| | | <!--弹窗 --> |
| | | <u-popup |
| | | overlayOpacity="0" |
| | | :overlayStyle="{ |
| | | 'display':'none', |
| | | }" |
| | | round="10" |
| | | :show="show" mode="bottom" @close="close" @open="open"> |
| | | <view class="contont"> |
| | | <h4>{{ markers[0].callout.content }}</h4> |
| | | <view class="title"><img :src="daohangIcon" alt="" style="width: 60rpx;height: 60rpx;">唐山市丰南区黄各庄镇宣庄二街</view> |
| | | <view class="footerText"> |
| | | {{ markers[0].callout.text }} |
| | | </view> |
| | | </view> |
| | | </u-popup> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import daohangIcon from '@/static/image/无人值守/司机端首页/daohang.jpg' |
| | | export default { |
| | | data() { |
| | | return { |
| | | show:false, |
| | | daohangIcon, |
| | | latitude: 38.04606544104117, |
| | | longitude: 114.48735479816793, |
| | | customerId: '', |
| | |
| | | borderRadius: 12, //边框圆角 |
| | | borderWidth: '10', |
| | | bgColor: '#08b078', //背景颜色 |
| | | display: 'ALWAYS' //常显 |
| | | display: 'ALWAYS' ,//常显, |
| | | text:'', |
| | | } |
| | | }, |
| | | { |
| | |
| | | toLocation: {} |
| | | }; |
| | | }, |
| | | onLoad(params){ |
| | | if(params){ |
| | | this.markers[0].latitude = Number(params.latitude) ; |
| | | this.markers[0].longitude = Number( params.longitude); |
| | | this.longitude = Number( params.longitude); |
| | | this.latitude = Number(params.latitude); |
| | | this.markers[0].callout.content = params.name; |
| | | this.markers[0].callout.text = params.brief; |
| | | console.log( this.markers) |
| | | this.show = true; |
| | | } |
| | | |
| | | } |
| | | } |
| | | |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | <style lang="scss" scoped> |
| | | .u-transition{ |
| | | display: none!important; |
| | | } |
| | | .contont{ |
| | | height: 300rpx; |
| | | width: 92%; |
| | | h4{ |
| | | color: #212121; |
| | | font-size: 30rpx; |
| | | font-weight: bold; |
| | | margin-left: 20rpx; |
| | | margin-top: 20rpx; |
| | | } |
| | | .title{ |
| | | font-size: 24rpx; |
| | | display: flex; |
| | | margin-left: 15rpx; |
| | | align-items: center; |
| | | margin-top: 15rpx; |
| | | color:#676767 ; |
| | | } |
| | | .footerText{ |
| | | margin-left: 35rpx; |
| | | color: #676767; |
| | | font-size: 24rpx; |
| | | |
| | | |
| | | } |
| | | } |
| | | |
| | | </style> |