私は多くの技術的なブログを見て、HTML5の地理的位置をめったに説明しません。
第一に、HTML5の位置決めはGoogleによって提供されているため、Moogleが本土をブロックしているため、これが主な理由ではありません
第二に、地理的なポジショニングには、HTML5のパフォーマンスが低くなります。
1。HTML5地理的位置決めの新機能地理的ポジショニングはHTML5の新機能であるため、関連するAPIを学習およびマスターし、地理的ポジショニングの使用方法を学ぶ必要があります
最初に常識を理解します
新しい名詞地質:
現在のブラウザが配置されている地理的座標を取得して、LBS(ロケーションベースのサービス)を提供するために、食品配達、Didiタクシー、Gaodeナビゲーションなど、以下を含むLBSを使用します。データ:
塩性:経度
緯度:緯度
高度:高度
速度:速度
プラットフォームを使用して、モバイルとPCのエンドに分割します。
(1)モバイルブラウザ:
まず、組み込みのGPSデータを使用してみてください -精度は米に基づいています
次に、モバイルベースステーション番号を使用して、対応する地理的位置配置の精度をユニットに逆転させます
(2)PCブラウザ:
コンピューターのIPアドレスを介してクエリを逆クエリします-
トピック:
では、どのようにしてHTML5からポジショニング情報を取得するのでしょうか?まず第一に、F12を押してブラウザでコンソールを開き、window.navigator.jeologyを入力してポジショニング情報を確認します。
ポジショニング情報には3つの主要な方法があり、意味は次のとおりです。
getCurrentPosition:fn(couck、err)//現在のポジショニングデータを取得します。
それ以来、HTML5ファイルで地理的なポジショニングを使用する方法を知っています。
<!doctype html> <html> <head lang = en> <meta charset = utf-8> </head> <body> <body> {//ボタンをクリックしてnavigator.geolocation.getCurrentPosition(couccb、errcb);交差点console.log(「ポジショニングデータの取得 '); '+pos.coords.altitude);交差点console.log( '故障したポジショニングデータを取得'); }} </script> </body> </html>
図に示されているように、クリックボタンの場合、位置決めデータは正常に取得されますが、高さと速度はPC側のためにヌルです。
navigator.geolocation.getCurrentPosotion(function(pos){console.log( ''ロケーションデータ取得成功 '); // pos.coords.longtitude ....}(err){console.log(' '配置データ取得が失敗しました'); // err.message})2.サードパーティツールBaiduマップを使用します
序文で述べたように、プロジェクトでBaiduマップを使用すると、多くのモバイルアプリケーションがユーザーがポジショニング情報を選択します。
まず、バイドゥのソースコードは誰にでもダウンロードされないことを知っておく必要があります。非常に良心会社。
手順を使用:
最初に公式ウェブサイトhttp://lbsyun.baidu.com/を開き、次にそれを下に引っ張ります。
Baiduマップは、Web開発、Android開発、iOS開発に使用できます
URL:http://lbsyun.baidu.com/index.php?
APIを使用するには、多くのケースに移動できます。最初にキーを取得する必要があります。
キーは後でクリックしてログインインターフェイスをポップアップし、登録された開発者アカウントにログインします。関連する携帯電話、メールボックスを入力してから、メールボックスで確認してください。
アプリケーション名を自由に記入してください
アプリケーションタイプの選択---ブラウザーnide
参照リスト:誰があなたのアプリケーションにアクセスできるか、アプリケーションにアクセスする方法にアクセスし、星番号「 *」に入力する方法を参照してください。つまり、誰もがそれにアクセスできることを意味します。プロジェクトは将来的に使用できます。交差点次に、[送信]をクリックして作成を完了します!交差点
アプリケーションの作成後、次のインターフェイスが表示されます。
ここでは、ここで作成されたアプリケーション番号、アプリケーション名、および最も重要なアクセスアプリケーションコードを表示します。これは前述の重要なことです!
キーを取得した後、ホームページに戻りますhttp://lbsyun.baidu.com/index.php?title=jspopular
左側の開発ガイドをクリックすると、関連するAPIとケースの使用が確認できます。交差点このAPIはAPIで最も良心です、ナンセンスはありません、
文章は非常に詳細で理解しやすいです。なぜなら、ここにいくつかの主な使用法を紹介するだけなので!交差点交差点
新しいHTMLファイルを作成し、上記のコードをHTMLファイルにコピーします
<! = JRBP IU6JCBPSXGVDQXAC0C ..... //v2.0バージョン:http://api.map.baidu.com/api前のバージョン、および以前のバージョン参照方法:src = http://api.map.baidu.com/api? ;高さ:500 px </style> </head> <body> <h1>マップインスタンスは、マップ名で重いものを避けるため、bmap.map var map.map(container)を使用しますセンターポイント座標とマップレベル1〜〜レベル18 Centerandzoom(Point、18); )。ボディ> </html>
Baiduマップを使用してください:
OK、htmlファイルでBaiduマップを正常に使用しました。交差点
関連関数の説明:
<スクリプトsrc = http://api.map.baidu.com/api?
AKの長いトランクキーを入力して、Baiduマップを引用してください!交差点
マップインスタンスマストを作成することを選択します。
var map = new bmap.map(container);
指定されたポイント、緯度、経度情報を作成してください!交差点わからない場合は、前のものを使用できます
navigator.geology.getCurrentPosotionメソッド緯度と経度マストを取得する方法を選択します。
var point = new bmap.point(116.300982,39.915907);
センターとしての中心点の表示マップ番号は、レベルを参照し、レベルをレベル1から18に分割できます。レベルのレベルが小さくなるほど、マップの範囲が大きく、レベルが大きくなります。レベルの効果。交差点---必見。
map.centerandzoom(Point、17);
マップは、フリーマウスオプションで選択できます。
map.enablescrollwheelzoom(true);
マップはコントロールを示しています - 効果はそれ自体でテストされています。
Map.AddControl(新しいbmap.addcontrol();
マップ(ラベル)にラベルを表示します
var marker = map.addoverlay(new bmap.marker(point));
OK、3番目のパーティバイドゥマップはここで言われています。自分で使用できる多くの楽しい機能があるため、メソッドとパラメーターはAPIにあります!
上記は、この記事のすべての内容です。