/
RandomIcons.vue
75 lines (62 loc) · 2.22 KB
/
RandomIcons.vue
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
<template>
<div class="flex">
<!-- map -->
<div class="w-full" ref="mapContent"></div>
<!-- menu -->
<ul class="w-[500px] h-[900px] overflow-y-scroll">
<li
class="px-2 py-3 text-center cursor-pointer hover:bg-gray-200"
:class="{ 'bg-gray-200': currentCoordinate === coordinate }"
v-for="coordinate in coordinateMenu"
:key="coordinate"
@click="moveMarker(coordinate)"
>
{{ `${coordinate.latitude} , ${coordinate.longtitude}` }}
</li>
</ul>
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
let map = {};
const mapContent = ref(null);
const currentCoordinate = ref(null);
const coordinateMenu = reactive([]);
const markers = [];
const getRandom = (min, max) => {
return Math.random() * (max - min) + min;
};
for (let i = 0; i < 20; i++) {
coordinateMenu[i] = { latitude: getRandom(22, 25), longtitude: getRandom(120, 122) };
}
const moveMarker = (coordinate) => {
currentCoordinate.value = coordinate;
// 篩選點擊的 icon
const filterMarker = markers.filter((marker) => {
return marker._latlng.lat === coordinate.latitude && marker._latlng.lng === coordinate.longtitude;
});
filterMarker[0].openPopup();
map.flyTo([coordinate.latitude, coordinate.longtitude], 9);
};
onMounted(() => {
map = L.map(mapContent.value).setView([23.695, 121.102], 8);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
coordinateMenu.forEach((coordinate, index) => {
markers[index] = L.marker([coordinate.latitude, coordinate.longtitude]);
markers[index].bindPopup(`${coordinate.latitude} , ${coordinate.longtitude}`).addTo(map);
// 監聽 icon 並且篩選座標
markers[index].addEventListener("click", (e) => {
const filterMarker = coordinateMenu.filter((coordinate) => {
return e.latlng.lat === coordinate.latitude && e.latlng.lng === coordinate.longtitude;
});
currentCoordinate.value = filterMarker[0];
map.flyTo([e.latlng.lat, e.latlng.lng], 9);
});
});
});
</script>