amap.vue
2.89 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
<template>
<view class="amap-container">
<view :prop="markerList" :change:prop="amap.updateEcharts" id="amap"></view>
<view class="">当前点击的对象的index值为：{{ dataIndex }}</view>
</view>
</template>
<script>
const start = 'static/ITkoala-amap/start.png'
export default {
data() {
return {
markerList: [],
dataIndex: ''
}
},
mounted() {
this.$nextTick(() => {
// this.getMapData()
this.getMapData()
})
},
methods: {
// 模拟从后台获取地图数据
getMapData() {
this.markerList = [
{
lat: 39.908775,
lng: 116.406315,
icon: start
},
{
lat: 39.973253,
lng: 116.473195,
icon: start
},
{
lat: 39.953253,
lng: 116.453195,
icon: start
}
]
},
//地图点击回调事件
onViewClick(params) {
this.dataIndex = params.dataIndex
}
}
}
</script>
<script module="amap" lang="renderjs">
import config from '@/components/ITkoala-amap/config.js'
const selectedStart = 'static/ITkoala-amap/selectedStart.png' //选中的图片
export default {
data() {
return {
map: null,
ownerInstanceObj: null //service层对象
}
},
mounted() {
if (typeof window.AMap === 'function') {
this.initAmap()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=' + config.WEBAK
script.onload = this.initAmap.bind(this)
document.head.appendChild(script)
}
},
methods: {
initAmap() {
this.map = new AMap.Map('amap', {
resizeEnable: true,
center: [116.397428, 39.90923],
layers: [ //使用多个图层
// new AMap.TileLayer.Satellite() //使用卫星图
],
zooms: [4, 18], //设置地图级别范围
zoom: 10
})
this.initMarkers()
},
//初始化标记点
initMarkers() {
let prevMarker = null
let prevIcon = null
this.markerList.forEach((item, index) => {
if(!!item.icon){
//添加点标记
let marker = new AMap.Marker({
position: new AMap.LngLat(item.lng, item.lat),
offset: new AMap.Pixel(-13, -30),
icon: item.icon
})
marker.on('click', (e) => {
if(prevMarker){
prevMarker.setIcon(prevIcon)
}
prevIcon = item.icon
prevMarker = marker
marker.setIcon(selectedStart)
this.dataIndex = index
this.onClick(this.ownerInstanceObj)
})
this.map.add(marker)
}
})
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
this.ownerInstanceObj = ownerInstance
this.initMarkers()
},
onClick(ownerInstance) {
// 调用 service 层的方法
ownerInstance.callMethod('onViewClick', {
dataIndex: this.dataIndex
})
}
}
}
</script>
<style lang="scss" scoped>
#amap {
width: 100%;
height: 600rpx;
}
.infoWindow-wrap{
margin-left: 50px;
color: #f00;
}
</style>