businessCard/xiaochengxu/pages/cardHolder/map.vue

<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers">
				<cover-view class="cover-view">
				          <cover-view class="container">
				            <cover-view class="flex-wrp" style="flex-direction:row;">
				              <cover-view class="flex-item demo-text-1">
								  <cover-view style="font-weight: bold;">{{dataObj.companyName}}</cover-view>
								   <cover-view style="margin-top: 20rpx;color: #ccc;font-size: 26rpx;display: flex;align-items: center;"><image src="../../static/location.png" mode="widthFix" style="width: 20px;margin-right: 20rpx;"></image>{{dataObj.province}}{{dataObj.city}}{{dataObj.area}}</cover-view>
							  </cover-view>
				            </cover-view>
				          </cover-view>
				        </cover-view>
				</map>
				
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [],
				dataObj:{
					companyName:'',
					area:'',
					city:'',
					province:''
				}
			}
		},
		onLoad(options) {
			this.dataObj = JSON.parse(options.val)
			
			let location=this.dataObj.location.split(',')
			this.latitude=location[0]
			this.longitude=location[1]
			this.covers = [
				{
					latitude: this.latitude,
					longitude: this.longitude,
					width:34,
					height:40,
					iconPath: 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/marker.png'
				}
			]
		},
		methods: {
	
		}
	}
</script>

<style lang="scss">
.cover-view {
  position: absolute;
  bottom: 80rpx;
  left:20rpx;
  /* opacity: .7; */
}

.flex-wrp{
  display:flex;
}

.flex-item{
  width: calc(100vw - 40rpx);
  height: 140rpx;
  font-size: 26rpx;
}

.demo-text-1 {
  background: #fff;
  border-radius: 20rpx;
  padding: 20rpx 40rpx;
  box-sizing: border-box;
}

</style>