Geolocation は、HTML5 標準に基づく Web API で、デバイスの現在の位置情報 (座標) を取得できます。この API には、getCurrentPosition、watchPosition、clearWatch という 3 つのメソッドがあります。残りの 2 つの方法は一緒に使用する必要があります。
使用方法:ブラウザの互換性チェック:
API は navigator.geolocation オブジェクトを通じて公開されます。このオブジェクトが存在する場合にのみ、その地理位置情報サービスを使用できます。
if (navigator.geolocation) { // 位置情報コードはここに記述されます} else {alert('地理位置情報はブラウザでサポートされていません')}ユーザーの現在位置を取得します。
getCurrentLocation メソッドを使用してユーザーの位置情報を取得します。このメソッドには 3 つのパラメーターがあります。
| パラメータ一覧 | タイプ | 説明する |
| ハンドル成功 | 関数 | 成功した場合は関数 handleSuccess を呼び出します |
| ハンドルエラー | 関数 | 失敗時に関数 handleError を呼び出す |
| オプション | 物体 | 初期化パラメータ |
// 初期化パラメータ const options = { // 高精度: true / false enableHighAccuracy: true, // 応答を待機する最大時間単位: ミリ秒 timeout: 5 * 1000, // アプリケーションが受け入れる最長のキャッシュ場所 Time minimumAge: 0}// 成功のコールバック関数: data には位置情報が含まれます const handleSuccess = data => console.log(data)// 失敗のコールバック関数: error にはエラー情報が含まれます const handleError = error => console.log(error)if (navigator.geolocation) { // 測位コードはここに書かれています navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options)} else {alert('Geolocation はお使いのブラウザではサポートされていません') }詳細を含むコードは次のとおりです。
const handleSuccess = data => { const { coords, // 位置情報 timestamp // 位置情報の取得に成功したときのタイムスタンプ} = data const {accuracy, // 返される結果の精度 (メートル) 高度, // 水平線に対する相対値plan Altitude AltitudeAccuracy, // 高度精度 (メートル) 方位を返します, // 北緯から時計回りのホスト デバイスの移動方向, // 緯度経度, // 経度速度 //デバイスの移動速度} = coords // 印刷して確認してください console.log('timestamp =', timestamp) console.log('accuracy =', precision) console.log('altitude =', Altitude) console .log( '高度精度 =', 高度精度) console.log('見出し =', 見出し) console.log('緯度 =', 緯度) console.log('経度 =', 経度) console.log('speed =',speed)}const handleError = error => { switch (error.code) { ケース 1: console.log('位置情報サービス要求が拒否されました') ブレーク ケース 2: console.log('一時的に位置情報を取得できません') ブレークケース 3: console.log('情報取得タイムアウト') ブレークケース 4: console.log('不明なエラー') ブレーク }}const opt = { // 高精度: true / falseenableHighAccuracy: true, //応答を待機する最大時間 単位: ミリ秒 timeout: 5 * 1000, // アプリケーションが受け入れることができるキャッシュ場所の最大経過期間 minimumAge: 0} if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(handleSuccess 、handleError、opt) } else {alert('地理位置情報はブラウザでサポートされていません')}以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。