54 lines
1.6 KiB
Vue
54 lines
1.6 KiB
Vue
<script setup>
|
|
import MapWrapper from "components/map/MapWrapper.vue";
|
|
import {Marker, Polyline, InfoWindow} from "vue3-google-map";
|
|
import {computed, onMounted, ref} from "vue";
|
|
import {axios} from "boot/axios";
|
|
|
|
|
|
const props = defineProps({
|
|
gpxTrack: {
|
|
type: Object,
|
|
required: false,
|
|
},
|
|
markers: {
|
|
type: Array,
|
|
required: false,
|
|
default: () => []
|
|
},
|
|
highlightPosition: {
|
|
type: Object,
|
|
required: false,
|
|
},
|
|
photos: {
|
|
type: Array,
|
|
required: false,
|
|
default: () => []
|
|
}
|
|
})
|
|
|
|
const track = ref([]);
|
|
const bounds = computed(() => {
|
|
const photosTransformed = props.photos.map(p => ({position: {lat: p.gpsLatitude, lng: p.gpsLongitude}}));
|
|
const allData = [...props.markers, ...track.value, ...photosTransformed];
|
|
return allData.filter(i => !!i.position).map(i => i.position);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<MapWrapper v-bind="$attrs" :bounds="bounds">
|
|
<Marker v-for="(marker, idx) in markers" :key="idx" :options="marker"/>
|
|
<Marker v-for="(photo, idx) in photos" :key="idx" :options="{icon: '/mapIcons/photo-16x16.png', position: {lat: photo.gpsLatitude, lng: photo.gpsLongitude}}">
|
|
<InfoWindow :options="{position: {lat: photo.gpsLatitude, lng: photo.gpsLongitude}}">
|
|
<img :src="photo.thumbnailUrl"/>
|
|
</InfoWindow>
|
|
</Marker>
|
|
|
|
<template v-if="gpxTrack && gpxTrack.length > 0">
|
|
<Polyline :options="{path: gpxTrack, geodesic: true, strokeColor: '#ff0000', strokeOpacity: 0.3, strokeWeight: 5}"/>
|
|
</template>
|
|
|
|
<Marker v-if="highlightPosition" :options="{position: highlightPosition, icon: '/mapIcons/currentPosition32x32.png'}"/>
|
|
|
|
</MapWrapper>
|
|
</template>
|