/
test-vue-amap.html
123 lines (118 loc) · 3.67 KB
/
test-vue-amap.html
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
<!DOCTYPE html>
<html>
<head>
<title>demo | vue-amap</title>
<meta charset="UTF-8">
<style>
#app {
min-height: 700px;
}
#amap {
min-height: 700px;
}
.amap-demo {
.height: 300px;
}
</style>
</head>
<body>
<div id="app">
<el-amap
vid="amap"
:center="center"
:zoom="zoom"
class="amap-demo"
:events="events">
<el-amap-marker v-for="marker in markers" :position="marker.position"
:content="marker.content" :events="marker.events"
>
</el-amap-marker>
</el-amap>
</div>
</body>
<!-- 先引入 Vue -->
<script src="../source/vue.js"></script>
<!-- 引入组件库 -->
<script src="../source/vue-amap.js"></script>
<script>
// 初始化高德地图的 key 和插件
window.VueAMap.initAMapApiLoader({
key: '93fc94012de7fd139283557b8d04534d',
plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor', 'AMap.MarkerClusterer'],
// 默认高德 sdk 版本为 1.4.4
v: '1.4.4'
});
var vm = new Vue({
el: '#app',
data: {
zoom: 12,
center: [121.59996, 31.197646],
markers: [],
markerRefs: [],
events: {
init(o) {
var scope = vm;
setTimeout(() => {
console.log(scope.markerRefs);
let cluster = new AMap.MarkerClusterer(o, scope.markerRefs,{
gridSize: 80,
renderCluserMarker: scope._renderCluserMarker
});
console.log(cluster);
}, 1000);
},
click(o) {
alert(2);
debugger;
},
}
},
created: function() {
let scope = this;
let markers = [];
let index = 0;
let basePosition = [121.59996, 31.197646];
while (++index <= 30) {
markers.push({
position: [basePosition[0], basePosition[1]],
content: '<div style="text-align:center; background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
events: {
init(o) {
scope.markerRefs.push(o);
},
click(o) {
debugger;
},
}
});
}
this.markers = markers;
},
methods: {
_renderCluserMarker(context) {
const count = this.markers.length;
let factor = Math.pow(context.count/count, 1/18)
let div = document.createElement('div');
let Hue = 180 - factor* 180;
let bgColor = 'hsla('+Hue+',100%,50%,0.7)';
let fontColor = 'hsla('+Hue+',100%,20%,1)';
let borderColor = 'hsla('+Hue+',100%,40%,1)';
let shadowColor = 'hsla('+Hue+',100%,50%,1)';
div.style.backgroundColor = bgColor
let size = Math.round(30 + Math.pow(context.count/count,1/5) * 20);
div.style.width = div.style.height = size+'px';
div.style.border = 'solid 1px '+ borderColor;
div.style.borderRadius = size/2 + 'px';
div.style.boxShadow = '0 0 1px '+ shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size+'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size/2,-size/2));
context.marker.setContent(div)
},
},
});
</script>
</html>