CommunityApp/pagesM/pages/nearby_team_map.vue

<template>
	<view style="height: 100vh;">
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map
				 :id="myMap"
				 :latitude="latitude" 
				 :longitude="longitude" 
				 :markers="covers"
				 style="width: 100%; height: 800upx;">
				</map>
			</view>
		</view>
		<view style="border-top-left-radius:20upx;border-top-right-radius:20upx;padding: 40upx 30upx;overflow: hidden;background-color: #fff;">
			<view style="display: flex;align-items: center;">
				<image :src="organizationInfo.organizeicon" mode="aspectFit" style="background-color: #f7f7f7;border-radius: 50%;width: 80upx;height: 80upx;"></image>
				<view style="flex:1;margin-left: 30upx;">
					<view style="font-size: 30upx;">{{organizationInfo.organizename}}</view>
					<view style="font-size: 20upx;color: #999999;margin-top: 10upx;">当前群人数{{organizationInfo.num}}员</view>
				</view>
				<view @tap="makePhone" style="width: 152upx;height:56upx;border-radius: 25px;text-align: center;font-size: 24upx;color: #fff;line-height: 56upx;background-color: #E42F2F;">
					联系团长
				</view>
			</view>
			<view style="height: 2upx;background-color: #F6F6F6;margin: 20upx 0;"></view>
			<view style="color: #999999;font-size: 24upx;">
				{{organizationInfo.areaname}}{{organizationInfo.address}}
			</view>
		</view>
		<view @tap="startNav" style="position: absolute;bottom: 0;left: 0;right: 0;font-size: 28upx;color: #fff;text-align:center;line-height:88upx;background:linear-gradient(93deg,rgba(218,62,62,1) 0%,rgba(255,121,121,1) 100%);">
			地图导航
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:1, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: 'http://139.9.103.171:1888/img/image/ic_location.png',
					title:'',
					width:'30',
					height:'30',
					
				}],
				organizationInfo:{}
			};
		},

		methods:{
			makePhone(){
				this.makePhoneCall(this.organizationInfo.phone);
			},
			onLoadPage(options){
				if(options.info){
					this.organizationInfo = JSON.parse(decodeURIComponent(options.info));
				}
			},
			startNav(){
				uni.openLocation({
					latitude: this.latitude,//要去的纬度-地址       
					longitude: this.longitude,//要去的经度-地址
					name: this.organizationInfo.areaname,//地址名称
					address: this.organizationInfo.address,//详细地址名称
					success: function () {
						console.log('导航成功');
					},
					fail:function(error){
						console.log(error)
					}
			   });
			}
		}
	}
</script>

<style lang="scss">

</style>