map copy.vue
5.16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<template>
<div style="position: relative;width: 100%;">
<div id="mapContainer" class="map"></div>
</div>
</template>
<script>
export default {
name: 'TencentMap',
props: {
lat: {
type: Number,
default: 30.67
},
lng: {
type: Number,
default: 104.06
},
isonloed: {
type: Boolean,
default: false
},
isx: {
type: Boolean,
default: true
},
ontype: {
type: String,
default: '1'
},
message: {
type: Array,
default: () => []
},
},
data() {
return {
map: null,
marker: null,
address: '',
markers: [],
infoWindow: null,
};
},
mounted() {
// 初始化地图
this.initMap(this.message);
},
methods: {
initMap(e) {
// 将经纬度转换为腾讯地图的LatLng对象
const centerLatLng = new qq.maps.LatLng(this.lat, this.lng);
// 创建地图实例
this.map = new qq.maps.Map(document.getElementById('mapContainer'), {
center: centerLatLng,
zoom: 13
});
// 创建信息窗口实例
this.infoWindow = new qq.maps.InfoWindow({
map: this.map
});
// 遍历 message 数组，为每个位置创建一个标记
if (e.length > 0) {
e.forEach(item => {
// console.error( item)
let list = this.ontype == '1' ? item.mapPunctuation.split(',') : this.ontype == '2' ? item.mapPunctuation.split(',') : this.ontype == '3' ? item.mapMarker.split(',') : [];
item.lat = parseFloat(list[0]);
item.lng = parseFloat(list[1]);
item.name = this.ontype == '1' ? item.shopName : this.ontype == '2' ? item.advertisingName : this.ontype == '3' ? item.venueName :'无';
const markerLatLng = new qq.maps.LatLng(item.lat, item.lng);
const customIconUrl1 = require(item.publishStatus=='0'?'@/assets/images/iconsp1.png':item.publishStatus=='1'?'@/assets/images/iconsp2.png':item.publishStatus=='2'?'@/assets/images/iconsp3.png':item.publishStatus=='3'?'@/assets/images/iconsp4.png':item.publishStatus=='4'?'@/assets/images/iconsp5.png':'@/assets/images/iconsp1.png'); // 确保返回的是 URL 字符串
const customIconUrl2 = require(item.publishStatus=='0'?'@/assets/images/icongg1.png':item.publishStatus=='1'?'@/assets/images/icongg2.png':item.publishStatus=='2'?'@/assets/images/icongg3.png':item.publishStatus=='3'?'@/assets/images/icongg4.png':item.publishStatus=='4'?'@/assets/images/icongg5.png':'@/assets/images/icongg1.png'); // 确保返回的是 URL 字符串
const customIconUrl3 = require(item.publishStatus=='0'?'@/assets/images/iconcd1.png':item.publishStatus=='1'?'@/assets/images/iconcd2.png':item.publishStatus=='2'?'@/assets/images/iconcd3.png':item.publishStatus=='3'?'@/assets/images/iconcd4.png':item.publishStatus=='4'?'@/assets/images/iconcd5.png':'@/assets/images/iconcd1.png'); // 确保返回的是 URL 字符串
const icon = this.ontype == '1'?customIconUrl1:this.ontype == '2'?customIconUrl2:this.ontype =='3'?customIconUrl3:''
const marker = new qq.maps.Marker({
position: markerLatLng,
map: this.map,
icon:icon
});
// 为标记添加点击事件监听器
qq.maps.event.addListener(marker, 'click', () => {
this.showInfoWindow(marker, item);
});
this.markers.push(marker);
});
}
},
showInfoWindow(marker, item) {
// 设置信息窗口的内容
const content = `
<div style="padding:10px 0;border-radius: 18px;">
<p style="padding-top:10px;">资源名称:${item.name}</p>
<p style="padding-top:10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;max-width: 200px;">位置:${item.detailedLocation}</p>
<p style="padding-top:10px;">租赁情况:<text style="${item.publishStatus=='0'?'color: #707B86;':item.publishStatus=='1'?'color: #ECAF5C;':item.publishStatus=='2'?'color: #4A77C9;':item.publishStatus=='3'?'color: #E75A46;':item.publishStatus=='4'?'color: #2AB867;':'color: #707B86;'}">${item.publishStatus=='0'?'待发布':item.publishStatus=='1'?'待审核':item.publishStatus=='2'?'已发布':item.publishStatus=='3'?'不通过':item.publishStatus=='4'?'已租赁':'-'}</text></p>
</div>
`;
// <div style="background: #fff;padding:5px 15px;border-radius: 18px;">
// <el-form :model="${item}" ref="ruleForm" label-width="80px" class="demo-ruleForm">
// <el-form-item label="资源名称" prop="entityName">
// <div class="duiqi">${item.name}</div>
// </el-form-item>
// <el-form-item label="位置" prop="entityName">
// <div class="duiqi">${item.detailedLocation}</div>
// </el-form-item>
// </el-form>
// </div>
// 设置信息窗口的位置和内容
this.infoWindow.setPosition(marker.getPosition());
this.infoWindow.setContent(content);
this.infoWindow.open();
}
}
}
</script>
<style scoped>
.map {
width: 100%;
height: 400px;
}
.address-info {
position: absolute;
bottom: 0;
left: 0;
z-index: 999999;
background: #fff;
}
</style>