完成找园区页面逻辑

pages/park/map_search.vue

@@ -1,7 +1,21 @@
 <template>
     <view style="height: 100%;">
-		<map style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers">
+		<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>
@@ -12,20 +26,83 @@
 	            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,
-	                iconPath: '/static/logo.png'
+					name:'天安门',
+	                iconPath: '/static/park/location.svg',
 	            }, {
+					id:2,
+					name:'XX12221',
 	                latitude: 39.90,
 	                longitude: 116.39,
-	                iconPath: '/static/logo.png'
+	                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>
 
@@ -33,4 +110,27 @@
 	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>

static/park/location.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="34px" height="42px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter x="98px" y="225px" width="34px" height="42px" filterUnits="userSpaceOnUse" id="filter96">
+      <feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetInner" />
+      <feGaussianBlur stdDeviation="2.5" in="shadowOffsetInner" result="shadowGaussian" />
+      <feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.698039215686274 0  " in="shadowComposite" />
+    </filter>
+    <g id="widget97">
+      <path d="M 114 260.036928468354  C 109.4 252.40734059591  102.5 247.829587872444  102.5 240.2  C 102.5 236.225714285714  104.8 229.5  114 229.5  C 123.2 229.5  125.5 236.225714285714  125.5 240.2  C 125.5 247.829587872444  118.6 252.40734059591  114 260.036928468354  Z " fill-rule="nonzero" fill="#5eb4d9" stroke="none" />
+      <path d="M 114 261  C 109.2 253  102 248.2  102 240.2  C 102 236.04  104.4 229  114 229  C 123.6 229  126 236.04  126 240.2  C 126 248.2  118.8 253  114 261  Z M 114 259.073856936707  C 118.4 251.81468119182  125 247.459175744887  125 240.2  C 125 236.411428571429  122.8 230  114 230  C 105.2 230  103 236.411428571429  103 240.2  C 103 247.459175744887  109.6 251.81468119182  114 259.073856936707  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" />
+    </g>
+  </defs>
+  <g transform="matrix(1 0 0 1 -98 -225 )">
+    <use xlink:href="#widget97" filter="url(#filter96)" />
+    <use xlink:href="#widget97" />
+  </g>
+</svg>