【ハッカソン】2024年 第1回 Qiitaハッカソン参加Memo🌟

// 自分の位置情報を取得する
// export default
function myGeoLocation() {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        resolve(position);
      },
      (error) => {
        reject(error);
      }
    );
  });
}

const position = await myGeoLocation();
console.log(position);

import React from 'react';

const LocationButton = () => {
  const getLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else { 
      alert("Geolocation is not supported by this browser.");
    }
  };

  const showPosition = (position) => {
    console.log("Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude);
  };

  const showError = (error) => {
    switch(error.code) {
      case error.PERMISSION_DENIED:
        alert("User denied the request for Geolocation.");
        break;
      case error.POSITION_UNAVAILABLE:
        alert("Location information is unavailable.");
        break;
      case error.TIMEOUT:
        alert("The request to get user location timed out.");
        break;
      case error.UNKNOWN_ERROR:
        alert("An unknown error occurred.");
        break;
    }
  };

  return <button onClick={getLocation}>Get Location</button>;
};

export default LocationButton;

yarn add @react-google-maps/api

yarn add @googlemaps/js-api-loader

import React, { useEffect, useState } from 'react';
import { Loader } from '@googlemaps/js-api-loader';

const GeolocationComponent = () => {
  const [address, setAddress] = useState('');

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success, handleError, options);
    } else {
      alert('あなたの端末では、現在位置を取得できません。');
    }

    function success(position) {
      const { latitude, longitude } = position.coords;
      const googleMapsLoader = new Loader({
        apiKey: 'XXXXX', // Set your API key here
        version: 'weekly',
      });

      googleMapsLoader.load().then(() => {
        const geocoder = new google.maps.Geocoder();
        const latlng = new google.maps.LatLng(latitude, longitude);
        geocoder.geocode({ latLng: latlng }, (results, status) => {
          if (status === google.maps.GeocoderStatus.OK) {
            setAddress(results[0].formatted_address);
          } else {
            alert('エラー' + status);
          }
        });
      });
    }

    function handleError(error) {
      const errorMessage = {
        0: '原因不明のエラーが発生しました。',
        1: '位置情報が許可されませんでした。',
        2: '位置情報が取得できませんでした。',
        3: 'タイムアウトしました。',
      };
      alert(errorMessage[error.code]);
    }

    const options = {
      enableHighAccuracy: false,
      timeout: 10000,
      maximumAge: 0,
    };
  }, []);

  return <div id="address">{address}</div>;
};

export default GeolocationComponent;

yarn add leaflet react-leaflet

# 型定義ファイル
yarn add -D @types/leaflet