<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>