yd_qycpfb/jp-mobile/pages/map/mapVisualization-th.vue

<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true" backUrl="/pages/indexcf/indexcf">
			<block slot="backText">返回</block>
			<block slot="content"> 地图可视化</block>
		</cu-custom>

		<!--绑定点击事件-->
		<!--地图容器-->
		<map id="myMap" :markers="markers" style="width: 100%;" :style="'height:' + windowHeight + 'px;'"
			:longitude="m_longitude" :latitude="m_latitude" scale='11' @markertap="markertap">
			<view class="cu-capsule radius capsule-custom" >
				<view class='cu-tag bg-blue' >
					园区
				</view>
				<view class="cu-tag line-blue tag-custom" >
					7个
				</view>
			</view>
			<cover-view class="cu-bar search" style="width: 51%;float: right; min-height: 35px;">
				<view class="search-form round" style="height: 30px; line-height: 30px; margin: 5px 5px 0px 0px;border: 1rpx solid #36A7F3;">
					<text class="cuIcon-search"></text>
					<input type="text"  placeholder="厂区面积搜索" v-model="curWord" confirm-type="search" @input="inputWord"></input>
				</view>
			</cover-view>
			<br/>
			<view class="cu-capsule radius capsule-custom" >
				<view class='cu-tag bg-blue '>
					厂房
				</view>
				<view class="cu-tag line-blue tag-custom">
					360000㎡
				</view>
			</view>
			<br/>
			<view class="cu-capsule radius capsule-custom" >
				<view class='cu-tag bg-blue '>
					楼宇
				</view>
				<view class="cu-tag line-blue tag-custom">
					28栋
				</view>
			</view>
			<br/>
			<view class="cu-capsule radius capsule-custom" >
				<view class='cu-tag bg-blue '>
					土地
				</view>
				<view class="cu-tag line-blue tag-custom">
					54900亩
				</view>
			</view>
		</map>

	</view>
</template>

<script>
	// 引入SDK核心类
	var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');

	// 实例化API核心类
	var qqmapsdk = new QQMapWX({
		key: '4OWBZ-KZICJ-PCPFK-XWKUM-FLKFJ-C5FI2' // 必填
	});

	import mapVisualizationService from '@/api/map/mapVisualization'

	export default {
		data() {
			return {
				windowHeight: uni.getSystemInfoSync().windowHeight - 45, //屏幕高度
				markers: [],
				m_longitude: 120.139726,
				m_latitude: 33.345562,
				currentWebview: '',
				webviewStyles: { // web-view样式
					width: "100%",
					height: "100%",
					top: 90,
				},
				curWord: "" ,//当前搜索关键词
				yqList: [
					{
						building_id: '1',
						building_name: "亭湖区电子信息产业园",
						site: "盐城市亭湖区南洋镇太湖路99号",
						distance: "10km",
						building_longitude: 120.232445,
						building_latitude: 33.430631,
						building_image: '../../static/img/th-park-1.jpg'
					},
					{
						building_id: '2',
						building_name: "睿思亭湖数字基地",
						site: "江苏省盐城市亭湖区中亭路9号力拓花园3幢",
						distance: "5.4km",
						building_longitude: 120.209738,
						building_latitude: 33.400009,
						building_image: '../../static/img/th-park-2.jpg'
					},
					{
						building_id: '3',
						building_name: "盐城环保产业园",
						site: "光伏路与经一路交叉口西北150米",
						distance: "13.4km",
						building_longitude: 120.269329,
						building_latitude: 33.440453,
						building_image: '../../static/img/th-park-3.jpg'
					},
					{
						building_id: '4',
						building_name: "江苏盐城光电产业园",
						site: "盐城市亭湖区青墩连接线与太湖路交叉路口往西南约90米",
						distance: "11km",
						building_longitude: 120.237555,
						building_latitude: 33.432122,
						building_image: '../../static/img/th-park-4.jpg'
					},
					{
						building_id: '5',
						building_name: "盐东镇科技产业园",
						site: "盐城市亭湖区利民村3组",
						distance: "22.2km",
						building_longitude: 120.355611,
						building_latitude: 33.473836,
						building_image: '../../static/img/th-park-5.jpg'
					},
					{
						building_id: '6',
						building_name: "兴泰(亭湖)产业园",
						site: "江苏省盐城市亭湖区瑞鹤路",
						distance: "14km",
						building_longitude: 120.275086,
						building_latitude: 33.44331,
						building_image: '../../static/img/th-park-6.jpg'
					},
					{
						building_id: '7',
						building_name: "江苏新青洋智能装备产业园",
						site: "江苏省盐城市亭湖区盐才路1号",
						distance: "16.3km",
						building_longitude: 120.192397,
						building_latitude: 33.468225,
						building_image: '../../static/img/th-park-7.jpg'
					},
				],
			}
		},
		components: {},
		onReady() {

		},
		mounted() {
			this.getBuildingList()
		},
		methods: {
			// 输入监听
			inputWord(e){
				// this.curWord = e.detail.value // 已使用v-model,无需再次赋值
				// 节流,避免输入过快多次请求
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(()=>{
					this.doSearch(this.curWord)
				},300)
			},
			doSearch(sWord){
				
			},
			markertap(e) {
				// 获取点击的marker的customData
				let markerId = e.detail.markerId;
				let selectedMarker = this.markers.find(marker => marker.id === markerId);
				let customData = selectedMarker.customData
				uni.navigateTo({
					url: '/pages/map/parkShow?parkId=' + customData.buildingId +
						'&parkName=' + customData.buildingName + 
						'&parkImage=' + customData.buildingImage
				});
			},
			convert2TecentMap(lng, lat) {
			  if (lng == '' && lat == '') {
			    return {
			      lng: '',
			      lat: ''
			    }
			  }
			  var x_pi = 3.14159265358979324 * 3000.0 / 180.0
			  var x = lng - 0.0065
			  var y = lat - 0.006
			  var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
			  var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
			  var qqlng = z * Math.cos(theta)
			  var qqlat = z * Math.sin(theta)
			  return {
			    lng: qqlng,
			    lat: qqlat
			  }
			},
			//获取楼宇信息
			getBuildingList() {
				let data = this.yqList
				if (data != null && data.length > 0) {
					let mar_arr = []
					data.forEach((item, index) => {
						//百度坐标转腾讯
						let convertPoint = this.convert2TecentMap(item.building_longitude, item.building_latitude)
						
						mar_arr.push({
							id: index,
							title: item.building_name,
							longitude: convertPoint.lng,
							latitude: convertPoint.lat,
							iconPath: '/static/img/building_ph.png',
							width: 35,
							callout: {
								content: item.building_name,
								display: 'ALWAYS'
							},
							customData: {
								buildingId: item.building_id,
								buildingName: item.building_name,
								buildingImage: item.building_image
							}
						})
					})
					this.markers = mar_arr
					this.getCenterPoint(this.markers)
				}
			},
			//计算所有点的中心点
			getCenterPoint(markers) {
			  let minLat = 90, maxLat = -90, minLng = 180, maxLng = -180;
			  markers.forEach(marker => {
			    if (marker.latitude < minLat) minLat = marker.latitude;
			    if (marker.latitude > maxLat) maxLat = marker.latitude;
			    if (marker.longitude < minLng) minLng = marker.longitude;
			    if (marker.longitude > maxLng) maxLng = marker.longitude;
			  });
			  
			  this.m_latitude = (minLat + maxLat) / 2
			  this.m_longitude = (minLng + maxLng) / 2
			},
		}
	}
</script>

<style scoped lang="scss">
	.capsule-custom{
		margin: 5px 0px 0px 5px; 
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
	}
	.tag-custom{
		background-color: #f3f3f3;
	}
	.input-box-search{
		margin-left: 20rpx;
		background: #fff;
		height: 60rpx;
		width: 420rpx;
		display: flex;
		align-items: center;
		border-radius: 30rpx;
		padding-left: 10rpx;
		margin-right: 20rpx;
	}
</style>