kgMini-new/pages/park/map_search.vue

<template>
    <view style="height: 100%;">
		<map style="width: 100%;height: 100%;" :scale="scale" :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="markertap" @callouttap="markertap">
		</map>
		<cover-view class="map-pop-box" v-show="isShowPop" @click="goParkDetail()">
			<cover-view class="display-between">
				<cover-view class="pop-title">{{popInfo.name || '-'}}</cover-view>
				<cover-image src="/static/selfCenter/back.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.company_count || '-'}}</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>
	import md5 from '@/common/md5.js';
	export default {
	    data() {
	        return {
				id:0, // 使用 marker点击事件 需要填写id
	            title: 'map',
	            latitude: 34.438387,
	            longitude: 108.762834,
				scale:13,
				isShowPop:false,
				startList:[],
				nowId:'',
				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(){
				 this.getPark();
			 },
	         mapRender(data){
				let arrayData = [];
				for (var i = 0; i < data.length; i++) {
					arrayData.push({
						id: Number(data[i].id), //marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。
						latitude: data[i].latitude, //纬度
						longitude: data[i].longitude, //经度
						title: data[i].name, //点击时显示，callout存在时将被忽略
						iconPath: '/static/park/location.svg', //项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径
						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
						},
					});
				}
			     this.covers = arrayData;
				//this.covers = arrayData.slice(0,1);
				console.log(this.covers);
			 },
	//地图点击事件
			markertap(e) {
				     this.nowId = e.detail.markerId;
					 this.startList.forEach((item)=>{
						if(item.id == e.detail.markerId){
							this.popInfo = item;
						}
					})
					this.isShowPop = true;
				},
				goParkDetail(){
					uni.navigateTo({
						url:'park_deatil?id=' + this.nowId
					})
				},
				getPark(){
					let md5Sign = md5("method="+'park'+"&timestamp="+getApp().globalData.globalTimestamp+"&secret="+getApp().globalData.secret)
					let url = getApp().globalData.shareUrl+'api/api.php'+'?method=park&source=park&action=list&timestamp='+getApp().globalData.globalTimestamp +'&sign='+md5Sign
					let postData = {
						order_by:"weight desc",
					}
					uni.request({
						url:url,
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data:postData,
						success: (res) => {
							console.log(res)
							if(res.data.code === 200){
								this.startList =res.data.data.list; 
								res.data.data.list.forEach((item)=>{
									item.location = item.location.split(',')
									let coverObj = {
										id:item.id,
										latitude: item.location[0],
										longitude: item.location[1],
										name:item.name,
									}
									this.covers.push(coverObj)
								})
								this.mapRender(this.covers)
							}
						},
						fail: () => {
							console.log("连接失败");
						}
					});
				},
			},
			
	}
</script>

<style>
	page {
		height: 100%;
	}
	.map-pop-box {
		width: 90%;
		padding: 40rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
	}
	.pop-title {
		font-size: 32rpx;
		font-weight: 600;
		line-height: 36rpx;
		letter-spacing: 0.02em;
		color: #0D1937;
	}
	.pop-subtitle{
		font-size: 26rpx;
		color: #CFCFCF;
		margin-right: 10rpx;
		width: 20%;
	}
	.pop-value {
		width: 75%;
		font-size: 26rpx;
		color: #0D1937;
		white-space: break-spaces;
	}
</style>