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

<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content"> 地图可视化</block>
		</cu-custom>
		<!-- 		<view>
			<web-view src="/hybrid/html/map.html" @onPostMessage="handlePostMessage" @message="handlePostMessage"
				:webview-styles="webviewStyles">
			</web-view>
		</view> -->

		<!--绑定点击事件-->
		<!--地图容器-->
		<map id="myMap" :markers="markers" style="width: 100%;" :style="'height:' + windowHeight + 'px;'"
			:longitude="m_longitude" :latitude="m_latitude" scale='15' @markertap="markertap">
		</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,
				},
			}
		},
		components: {},
		onReady() {

		},
		mounted() {
			this.getBuildingList()
		},
		methods: {
			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/companyShow?buildingId=' + customData.buildingId +
						'&buildingName=' + customData.buildingName
				});
			},
			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() {
				uni.showLoading()
				mapVisualizationService.getBuildingList().then(({
					data
				}) => {
					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
								}
							})
						})
						this.markers = mar_arr
						this.getCenterPoint(this.markers)
					}
					uni.hideLoading()
				}).catch((e) => {
					uni.hideLoading()
				})
			},
			//计算所有点的中心点
			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
			},
			//获取天地图参数
			handlePostMessage(data) {
				console.log('天地图发来的数据', data.detail.data[0].buildingId)

				//企业数量检测
				// uni.showLoading()
				// mapVisualizationService.getCompanyNum(data.detail.data[0].buildingId).then(({
				// 	data
				// }) => {
				// 	if (data != null && data > 0) {

				// 	}
				// 	uni.hideLoading()
				// }).catch((e) => {
				// 	uni.hideLoading()
				// })

				uni.navigateTo({
					url: '/pages/map/companyShow?buildingId=' + data.detail.data[0].buildingId +
						'&buildingName=' + data.detail.data[0].buildingName
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	
</style>