158 lines
4.2 KiB
Plaintext
158 lines
4.2 KiB
Plaintext
---
|
||
import '@/styles/globals.css';
|
||
import Layout from '../layouts/Layout.astro';
|
||
import { Button } from '@/components/ui/button';
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardFooter,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from '@/components/ui/card';
|
||
|
||
import { CalendarIcon } from '@radix-ui/react-icons';
|
||
|
||
import '../styles/locked-page.css';
|
||
import LocationButton from '@/components/LockedContent';
|
||
---
|
||
|
||
<Layout>
|
||
<main class="flex flex-col gap-3 my-4 items-center">
|
||
<Card className="w-full">
|
||
<CardHeader>
|
||
<CardTitle>Ayşe</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p>
|
||
Senin için bir sürpriz hazırladım, ama önce aşağıdaki konuma gitmen
|
||
lazım 😘
|
||
</p>
|
||
</CardContent>
|
||
<CardFooter className="gap-2">
|
||
<CalendarIcon />
|
||
<p>5 saat önce</p>
|
||
</CardFooter>
|
||
</Card>
|
||
|
||
<div id="map" class="w-full h-[450px]"></div>
|
||
|
||
<LocationButton client:load />
|
||
</main>
|
||
|
||
<Button className="w-full">Paylaş</Button>
|
||
</Layout>
|
||
|
||
<script>
|
||
import distance from '../utils/distance';
|
||
|
||
let map: google.maps.Map, infoWindow: google.maps.InfoWindow;
|
||
async function initMap(): Promise<void> {
|
||
const { Map } = (await google.maps.importLibrary(
|
||
'maps'
|
||
)) as google.maps.MapsLibrary;
|
||
|
||
const { AdvancedMarkerElement } = (await google.maps.importLibrary(
|
||
'marker'
|
||
)) as google.maps.MarkerLibrary;
|
||
|
||
map = new Map(document.getElementById('map') as HTMLElement, {
|
||
center: { lat: -34.397, lng: 150.644 },
|
||
zoom: 8,
|
||
mapId: 'DEMO_MAP_ID',
|
||
mapTypeControl: false,
|
||
});
|
||
|
||
const currentLocationIcon = document.createElement('img');
|
||
currentLocationIcon.src = '/blue-dot.png';
|
||
|
||
const currentLocationMarkerView = new AdvancedMarkerElement({
|
||
map,
|
||
position: { lat: 37.434, lng: -122.082 },
|
||
content: currentLocationIcon,
|
||
title: 'Current Location',
|
||
});
|
||
|
||
infoWindow = new google.maps.InfoWindow();
|
||
|
||
const locationButton = document.createElement('button');
|
||
const locationInfo = document.createElement('button');
|
||
|
||
locationButton.textContent = 'Konumuma Git';
|
||
locationInfo.textContent = 'Mesafe hesaplanıyor...';
|
||
|
||
locationButton.classList.add('custom-map-control-button');
|
||
locationInfo.classList.add('custom-map-control-button');
|
||
|
||
map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
|
||
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(locationInfo);
|
||
|
||
setInterval(
|
||
() =>
|
||
navigator.geolocation.getCurrentPosition(
|
||
(position: GeolocationPosition) => {
|
||
const pos = {
|
||
lat: position.coords.latitude,
|
||
lng: position.coords.longitude,
|
||
};
|
||
|
||
const mapPos = map.getCenter();
|
||
|
||
const totalDistanceInKM = distance(
|
||
pos.lat,
|
||
pos.lng,
|
||
mapPos?.lat(),
|
||
mapPos?.lng()
|
||
).toFixed(0);
|
||
|
||
currentLocationMarkerView.position = pos;
|
||
|
||
locationInfo.textContent = `Aradaki Mesafe: ${totalDistanceInKM} km`;
|
||
},
|
||
() => {
|
||
handleLocationError(true, infoWindow, map.getCenter()!);
|
||
}
|
||
),
|
||
3000
|
||
);
|
||
|
||
locationButton.addEventListener('click', () => {
|
||
// Try HTML5 geolocation.
|
||
if (navigator.geolocation) {
|
||
navigator.geolocation.getCurrentPosition(
|
||
(position: GeolocationPosition) => {
|
||
const pos = {
|
||
lat: position.coords.latitude,
|
||
lng: position.coords.longitude,
|
||
};
|
||
|
||
map.setCenter(pos);
|
||
map.setZoom(12);
|
||
},
|
||
() => {
|
||
handleLocationError(true, infoWindow, map.getCenter()!);
|
||
}
|
||
);
|
||
} else {
|
||
// Browser doesn't support Geolocation
|
||
handleLocationError(false, infoWindow, map.getCenter()!);
|
||
}
|
||
});
|
||
}
|
||
|
||
function handleLocationError(
|
||
browserHasGeolocation: boolean,
|
||
infoWindow: google.maps.InfoWindow,
|
||
pos: google.maps.LatLng
|
||
) {
|
||
infoWindow.setPosition(pos);
|
||
infoWindow.setContent(
|
||
browserHasGeolocation
|
||
? 'Error: Konumunuz tespit edilemedi.'
|
||
: 'Error: Tarayıcınız konum tespitini desteklemiyor.'
|
||
);
|
||
infoWindow.open(map);
|
||
}
|
||
|
||
initMap();
|
||
</script>
|