Created
December 13, 2020 20:43
-
-
Save elizad/43ef3fef62015b0f2421951ecf6ae11e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, useEffect } from 'react'; | |
export class GeoService { | |
public pos: any; | |
public getPosition() { | |
navigator.geoLocation.getCurrentPosition((position) => { | |
this.pos = position; | |
}); | |
} | |
} | |
let geo = new GeoService(); | |
// When called, `this` will be the window | |
setTimeout(geo.getPosition, 1000); | |
// When called, `this` will be the dom element | |
document.getElementById('myDiv').addEventListener('click', geo.getPosition); | |
// When called, `this` will be the window | |
setTimeout(() => { geo.getPosition(); }, 1000); | |
// When called, `this` will be the dom element | |
document.getElementById('myDiv').addEventListener('click', () => { geo.getPosition(); }); | |
export class GeoService { | |
public pos: any; | |
public getPosition = () => { | |
navigator.geoLocation.getCurrentPosition((position) => { | |
this.pos = position; | |
}); | |
} | |
} | |
const getLocation = () =>{ | |
const pos = { | |
lat?: number, | |
lng?: number | |
}; | |
const geolocation = navigator.geolocation; | |
if (geolocation) { | |
geolocation.getCurrentPosition(findLocal, showEror); | |
} | |
function findLocal(position){ | |
pos.lat = position.coords.latitude; | |
pos.lng = position.coords.longitude; | |
} | |
function showEror(){console.log(Error)} | |
return pos; | |
}; | |
const myLocation = getLocation(); // object has lat and lng | |
// const defaultSettings = { | |
// enableHighAccuracy: false, | |
// timeout: Infinity, | |
// maximumAge: 0, | |
// }; | |
// | |
interface Props {} | |
const a = navigator.geolocation.getCurrentPosition((position) => { | |
console.log("Got position", position.coords); | |
// position.coords.accuracy | |
// this.lon = position.coords.longitude; | |
// this.lat = position.coords.latitude; | |
// this.lon = position.coords.longitude; | |
}); | |
const options = { | |
enableHighAccuracy: true, | |
timeout: 5000, | |
maximumAge: 0 | |
}; | |
const useMPosition: React.FC<Props> = ({}) => { | |
return ( | |
function success(pos) { | |
var crd = pos.coords; | |
console.log('Your current position is:'); | |
console.log(`Latitude : ${crd.latitude}`); | |
console.log(`Longitude: ${crd.longitude}`); | |
console.log(`More or less ${crd.accuracy} meters.`); | |
} | |
function error(err) { | |
console.warn(`ERROR(${err.code}): ${err.message}`); | |
} | |
navigator.geolocation.getCurrentPosition(success, error, options); | |
); | |
}; | |
export const usePosition: React.FC<Props> = (watch = false, settings = defaultSettings) => { | |
const [position, setPosition] = useState({}); | |
const [error, setError] = useState(null); | |
const onChange = ({coords, timestamp}) => { | |
setPosition({ | |
latitude: coords.latitude, | |
longitude: coords.longitude, | |
accuracy: coords.accuracy, | |
speed: coords.speed, | |
timestamp, | |
}); | |
}; | |
const onError = (err) => { | |
setError(err.message); | |
}; | |
useEffect(() => { | |
if (!navigator || !navigator.geolocation) { | |
setError('Geolocation is not supported'); | |
return; | |
} | |
let watcher = null; | |
if (watch) { | |
watcher = | |
navigator.geolocation.watchPosition(onChange, onError, settings); | |
} else { | |
navigator.geolocation.getCurrentPosition(onChange, onError, settings); | |
} | |
return () => watcher && navigator.geolocation.clearWatch(watcher); | |
}, [ | |
settings.enableHighAccuracy, | |
settings.timeout, | |
settings.maximumAge, | |
]); | |
return {...position, error}; | |
}; | |
export default useMPosition; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment