map.vue
6.83 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<template>
<div style="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 TMap.LatLng(this.lat, this.lng);
// 创建地图实例
this.map = new TMap.Map(document.getElementById("mapContainer"), {
center: centerLatLng,
zoom: 13,
mapStyleId: 'style1'
});
// return
// 创建信息窗口实例
this.infowindow = new TMap.InfoWindow({
map: this.map,
position: centerLatLng,
offset: { x: 0, y: -20 } //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
});
this.infowindow.close();//初始关闭信息窗关闭
const listall = []
const listallstyles = {}
// 遍历 message 数组，为每个位置创建一个标记
if (e.length > 0) {
e.forEach(item => {
// console.error( item)
let idstyles ='Style'+item.id
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 TMap.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');
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');
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');
// const customIconUrl1 = 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';
// const customIconUrl2 = 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';
// const customIconUrl3 = 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';
const icon = this.ontype == '1'?customIconUrl1:this.ontype == '2'?customIconUrl2:this.ontype =='3'?customIconUrl3:''
// const icon = 'https://zhgw-uat.028wlkj.com/cdwlMall/zsfwzxt/test/file/static/zjjf.png'
let infoitem = {
"styleId":idstyles,
"id": item.id,
"position": markerLatLng,
"icon":icon,
"properties":item
}
listallstyles[idstyles] = new TMap.MarkerStyle({
"width": 51, // 点标记样式宽度（像素）
"height": 52, // 点标记样式高度（像素）
"src": icon, //图片路径
//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
// "anchor": { x: 16, y: 32 }
})
listall.push(infoitem)
});
console.error(listallstyles )
this.marker = new TMap.MultiMarker({
styles:listallstyles,
map: this.map, //指定地图容器
geometries:listall
});
this.marker.on("click", this.showInfoWindow)
}
},
showInfoWindow(event) {
console.error(event)
let lat = event.latLng.getLat().toFixed(6);
let lng = event.latLng.getLng().toFixed(6);
let item = event.geometry.properties
// 设置信息窗口的内容
const content = `
<div style="padding:10px 0;border-radius: 18px;text-align: left;">
<p style="">资源名称:${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>
`;
this.infowindow.open(); //打开信息窗
this.infowindow.setPosition(new TMap.LatLng(lat,lng));//设置信息窗位置
this.infowindow.setContent(content);//设置信息窗内容
// this.infowindow = new TMap.InfoWindow({
// content:content, //信息窗口内容
// position:new TMap.LatLng(lat,lng),//显示信息窗口的坐标
// map:this.map
// });
}
}
}
</script>
<style scoped>
.map {
width: 100%;
height: 400px;
/* overflow: hidden; */
}
</style>