H5/11__GeoLocation 地理位置情報-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

H5/11__GeoLocation 地理位置情報

黄舟

Feb 18, 2017 pm 02:54 PM

GeoLocation API は通常、モバイルデバイスが地理的位置を取得するために使用されます。

一この API を使用するには、次のコマンドを実行します。 window.navigator. geolocatio 地理位置情報にアクセスします。このオブジェクトには次の 3 つのメソッドがあります: 1. getCurrentPosition()

2. watchPosition()

3. getCurrentPosition() メソッドは、以下に示すように 3 つのパラメーターを渡すことができます。 void getCurrentPosition(PositionCallback successCallback, オプションの PositionErrorCallback errorCallback, オプションの PositionOptions options);

最初のパラメータは必須パラメータで、最後の 2 つはオプションのパラメータです

例を見てください:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>GeoLocation API 地理定位</title>
    <script type="text/javascript">
    	
   		
   		window.navigator.geolocation.getCurrentPosition(function(pos){
   			alert("当前地理位置的纬度： " +pos.coords.latitude
   			+"\n当前地理位置的经度： " +pos.coords.longitude
   			+ "\n当前经纬度的精度： " +pos.coords.accuracy
   			+ "\n设备的当前运动方向： " +pos.coords.heading
   			+ "\n设备的当前速度： " +pos.coords.speed
   			);
   			
   		});
   		
   		var watchID= window.navigator.geolocation.watchPosition(function(pos){
   			alert("当前位置变化的纬度： " +pos.coords.latitude
   			+"\n当前位置变化的经度： " +pos.coords.longitude
   			+ "\n当前经纬度变化的精度： " +pos.coords.accuracy
   			+ "\n设备的当前运动方向： " +pos.coords.heading
   			+ "\n设备的当前变化的速度： " +pos.coords.speed);
   			
   			navigator.geolocation.clearWatch(watchID);
   		}, function(){
   		});
    </script>
</head>
<body>
	
</body>
</html>

ログイン後にコピー

Call get CurrentPosition( ) 成功後、コールバック関数で、パラメーターオブジェクトを通じて Web ページにアクセスするときに、現在のユーザーの地理的位置情報を取得できます。この属性には、一連の地理的座標情報を表す coords 属性が含まれています。

緯度: 緯度 (10 進数)

経度: 経度 (10 進数)

高度: 高さ

精度: 緯度と経度の座標の精度 (メートル単位)

高度精度: メートル単位コーディネート単位での精度レベル

Heading: 移動方向 (真北に対する時計回りの回転角度で指定)

speed: 現在の対地速度 (m/s 単位)

pos タイムスタンプ属性も含まれるこれは、coords オブジェクトを返すときにミリ秒単位のタイムスタンプを作成するために使用されます。

レンダリングは次のとおりです:

上記は、H5 11__GeoLocation 地理位置情報の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7522

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

h5 とはどういう意味ですか? Aug 02, 2023 pm 01:52 PM

H5 は、HTML の最新バージョンである HTML5 を指します。H5 は、開発者により多くの選択肢と創造的なスペースを提供する強力なマークアップ言語です。その出現は、Web テクノロジーの発展を促進し、Web ページのインタラクションと効果をより優れたものにします。H5 テクノロジーとして徐々に成熟して普及していき、インターネットの世界でますます重要な役割を果たしていくと思います。

H5、WEB フロントエンド、ビッグフロントエンド、WEB フルスタックを区別するにはどうすればよいですか? Aug 03, 2022 pm 04:00 PM

この記事は、H5、WEB フロントエンド、大規模フロントエンド、WEB フルスタックを簡単に区別するのに役立ちます。

h5の位置の使い方 Dec 26, 2023 pm 01:39 PM

H5 では、position 属性を使用して、CSS を通じて要素の位置を制御できます: 1. 相対位置、構文は「style="position:relative;」です。 2. 絶対位置、構文は「style="position:」です。 Absolute;" "; 3. 固定位置、構文は「style="position:fixed;」などです。

Web側でh5を上にスライドさせて次のページを読み込むように実装する方法 Mar 11, 2024 am 10:26 AM

実装手順: 1. ページのスクロールイベントを監視する; 2. ページが一番下までスクロールしたかどうかを判断する; 3. データの次のページをロードする; 4. ページのスクロール位置を更新する。

自分の位置情報を他の人に送信する方法 Jun 27, 2023 am 10:13 AM

位置情報を他の人に送信する方法は次のとおりです: 1. モバイルマップを使用して位置情報を送信し、共有インターフェイスで適切な通信アプリケーションまたはソーシャルメディアを選択し、位置情報を必要とする人々に送信します。デバイス間の通信を実現するサードパーティの位置情報共有ツール位置情報の共有; 3. Wi-Fi、Bluetooth、およびビーコンテクノロジーを使用して位置情報を送信します。

vue3 で H5 フォーム検証コンポーネントを実装する方法 Jun 03, 2023 pm 02:09 PM

レンダリング記述は vue.js に基づいており、他のプラグインやライブラリに依存せず、基本的な機能は element-ui と一致しており、モバイル端末の違いに合わせて内部実装にいくつかの調整が加えられています。現在の構築プラットフォームは uni-app 公式スキャフォールディングを使用して構築されており、現在ほとんどのモバイル端末には h6 と WeChat ミニプログラムの 2 種類が搭載されているため、複数の端末で 1 セットのコードを実行する技術の選択に非常に適しています。実装アイデアのコア API: とに対応する、provide と inject を使用します。コンポーネントでは、すべてのインスタンスを格納するために変数 (配列) が内部的に使用され、転送されるデータは Provide を通じて公開されます。コンポーネントは内部で Inject を使用して親コンポーネントから提供されたデータを受け取り、最後に独自の属性をメソッドの送信