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 までご連絡ください。

H5およびHTML5：Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）

H5コード：アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

H5はHTML5と同じですか？Apr 08, 2025 am 12:16 AM

「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

H5の機能は何ですか？Apr 07, 2025 am 12:10 AM

H5、またはHTML5は、HTMLの5番目のバージョンです。開発者により強力なツールセットを提供し、複雑なWebアプリケーションを簡単に作成できるようにします。 H5のコア関数には、次のものが含まれます。1）Webページにグラフィックとアニメーションを描画できる要素。 2）Webページ構造をSEOの最適化を明確かつ助長させるなどのセマンティックタグなど。 3）Geolocationapiなどの新しいAPIは、ロケーションベースのサービスをサポートします。 4）互換性テストとポリフィルライブラリを通じて、クロスブラウザーの互換性を確保する必要があります。

H5リンクの実行方法Apr 06, 2025 pm 12:39 PM

H5リンクを作成する方法は？リンクターゲットを決定します。H5ページまたはアプリケーションのURLを取得します。 HTMLアンカーの作成：＆lt; a＆gt;を使用しますアンカーを作成し、リンクターゲットURLを指定するタグ。リンクプロパティの設定（オプション）：必要に応じて、ターゲット、タイトル、およびオンクリックプロパティを設定します。 Webページに追加：リンクを表示するWebページにHTMLアンカーコードを追加します。

See all articles