konggang-city-miniprogram/pages/park/map_search.vue

<template>
    <view style="height: 100%;">
		<map style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="markertap($event)">
		</map>
		<cover-view class="map-pop-box" v-show="isShowPop" @click="goParkDetail()">
			<cover-view class="display-between">
				<cover-view class="pop-title">{{popInfo.title}}</cover-view>
				<cover-image src="/static/park/location2.png" style='width:50rpx;height:50rpx;'></cover-image>
			</cover-view>
			<cover-view class="display-flex-start" style="margin-bottom: 10rpx;">
				<cover-view class="pop-subtitle">入驻企业:</cover-view>
				<cover-view class="pop-value">{{popInfo.enterprise}}</cover-view>
			</cover-view>
			<cover-view class="display-flex-start">
				<cover-view class="pop-subtitle">园区地址:</cover-view>
				<cover-view class="pop-value">{{popInfo.address}}</cover-view>
			</cover-view>
		</cover-view>
    </view>
</template>
<script>
	export default {
	    data() {
	        return {
				id:0, // 使用 marker点击事件 需要填写id
	            title: 'map',
	            latitude: 39.909,
	            longitude: 116.39742,
				isShowPop:false,
				popInfo:{
					title:"新鸿辉工业园测试数据",
					enterprise:'484',
					address:'渭城区底张镇88号',
					id:1
				},
	            covers: [{
					id:1,
	                latitude: 39.909,
	                longitude: 116.39742,
					name:'天安门',
	                iconPath: '/static/park/location.svg',
	            }, {
					id:2,
					name:'XX12221',
	                latitude: 39.90,
	                longitude: 116.39,
	                iconPath: '/static/park/location.svg'
	            }]
	        }
	    },
		onLoad() {
			this.init()
		},
	    methods: {
			 init(){
				 let that = this;
				 that.mapRender(that,that.covers)
			 },
	         mapRender(that,data){
				let arrayData = [];
				for (var i = 0; i < data.length; i++) {
					arrayData.push({
						id: data[i].id, //marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。
						latitude: data[i].latitude, //纬度
						longitude: data[i].longitude, //经度
						title: data[i].name, //点击时显示，callout存在时将被忽略
						iconPath:data[i].iconPath, //项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径
						width: 20,
						height: 30,
						callout: {
							content: data[i].name,  //文本
							color: '#000',  //文本颜色
							borderRadius: 3,  //边框圆角
							borderWidth: 0,  //边框宽度
							borderColor: '#FF0202',  //边框颜色
							bgColor: '#fff',  //背景色
							padding: 10,  //文本边缘留白
							display:'ALWAYS',
							textAlign: 'center'  //文本对齐方式  left, right, center
						},
					});
				}
				console.log(arrayData);
			    that.covers = arrayData;
			 },
	//地图点击事件
			markertap(e) {
				console.log("你点击的标记点ID是:" + e.detail.markerId)
				this.isShowPop = true;
				//console.log(e)
			 //  this.covers.forEach((item)=>{
				// 	if(item.id === e.detail.markerId){
				// 		item.label.color = '#000'
				// 	}else {
				// 		item.label.color = '#999'
				// 	}
				// })
				},
				goParkDetail(){
					uni.navigateTo({
						url:'park_deatil?id=1'
					})
				}
			},
			
	}
</script>

<style>
	page {
		height: 100%;
	}
	.map-pop-box {
		width: 92%;
		padding: 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
	}
	.pop-title {
		font-size: 28rpx;
		font-weight: 600;
		line-height: 36rpx;
		letter-spacing: 0.02em;
		color: #0D1937;
	}
	.pop-subtitle{
		font-size: 20rpx;
		color: #CFCFCF;
		margin-right: 10rpx;
	}
	.pop-value {
		font-size: 20rpx;
		color: #0D1937;
	}
</style>