TMap.vue
3.19 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
150
151
152
153
154
155
156
157
158
<template>
<view><view @click="tmap.onClick" :prop="markerList" :change:prop="tmap.updateEcharts" id="tmap"></view></view>
</template>
<script>
export default {
data() {
return {
markerList: [],
dataIndex: 0
}
},
created() {
this.$nextTick(() => {
this.getMapData()
})
},
methods: {
// 地图数据获取
getMapData() {
this.markerList = [
{
lng: 116.388771,
lat: 39.928242
},
{
lng: 116.392157,
lat: 39.930482
},
{
lng: 116.389219,
lat: 39.925809
}
]
},
//图表点击回调事件
onViewClick(params) {
this.dataIndex = params.dataIndex
}
}
}
</script>
<script module="tmap" lang="renderjs">
import config from '@/components/ITkoala-amap/config.js'
export default {
data() {
return {
map: null,
ownerInstanceObj: null, //service层对象
markerLayer: null,
dataIndex: null
}
},
mounted() {
if (typeof window.AMap === 'function') {
this.initAmap()
} else {
const script = document.createElement('script')
script.src = 'https://map.qq.com/api/gljs?v=1.exp&key=' + config.TMAP_JSAPIAK
script.onload = this.initAmap.bind(this)
document.head.appendChild(script)
}
},
methods: {
initAmap() {
//定义地图中心点坐标
//定义map变量，调用 TMap.Map() 构造函数创建地图
this.map = new TMap.Map('tmap', {
center: new TMap.LatLng(39.90923, 116.397428),//设置地图中心点坐标
zoom: 12, //设置地图缩放级别
maxZoom: 16, //设置地图级别范围
// pitch: 43.5, //设置俯仰角
// rotation: 45, //设置地图旋转角度
baseMap: { // 设置卫星地图
type: 'satellite'
}
});
this.initMarkers()
},
//初始化标记点
initMarkers() {
if (this.markerLayer) {
this.markerLayer.setMap(null)
this.markerLayer = null
}
if(!this.map){
return
}
//初始化marker图层
this.markerLayer = new TMap.MultiMarker({
id: 'marker-layer',
map: this.map,
styles: {
start: new TMap.MarkerStyle({
width: 35,
height: 30,
anchor: { x: 16, y: 16 },
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
}),
selected: new TMap.MarkerStyle({
width: 35,
height: 35,
anchor: { x: 16, y: 32 },
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerNew.png'
})
}
})
this.markerLayer.on('click', (evt) => {
this.dataIndex = evt.geometry.id
this.onClick(null,this.ownerInstanceObj)
this.initMarkers()
})
this.markerList.forEach((item, index) => {
let icon = 'start'
if(index === this.dataIndex){
icon = 'selected'
}
this.markerLayer.add({
id: index,
position: new TMap.LatLng(item.lat, item.lng),
styleId: icon
})
})
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
this.ownerInstanceObj = ownerInstance
this.initMarkers()
},
onClick(event, ownerInstance) {
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', {
dataIndex: this.dataIndex
})
}
}
}
</script>
<style lang="scss" scoped>
#tmap {
width: 100%;
height: 900rpx;
}
</style>