コンポーネントを利用してWebブラウザ上に現在位置を表示してみよう [JAPAN]

Posted by on in Blogs

Delphi/C++Builderで現在の緯度経度を取得し、さらに現在位置の地図を表示する方法についてご説明します。

サマリ

  • iOSやAndroidで現在の緯度経度を知ることができます。

  • 地図表示には TMapView を用いる方法と、Webブラウザ経由で地図サイトを表示する方法があります。

以下の内容は、Youtube で公開済みの How to ビデオの内容に添って説明いたします。

 

コンポーネントを利用してWebブラウザ上に現在位置を表示してみよう(C++Builder編)

コンポーネントを利用してWebブラウザ上に現在位置を表示してみよう(Delphi編)

また、本件については下記ページょの情報も併せてお読みください。

http://docwiki.embarcadero.com/RADStudio/ja/モバイル_チュートリアル:位置センサを使用する(iOS_および_Android)

使用するコンポーネント

  • TLocatioinSensor

  • TWebBrowser

  • TListBox

    • ListBoxItem

緯度経度の取得

Delphi/C++Builderでは、LocationSensorのコンポーネントを用いて現在の緯度経度を知ることができます。緯度経度はGPS測位による実測に加えて近隣のWiFiアクセスポイントからも決定できますが、実際の位置決定は個々のOSの機能に基づいて行なわれます。

そして測位された緯度経度は、onLocationChanged のイベントで取得できます。

![TLocationSensorのイベント設定](https://community.embarcadero.com/uploads/10818/20170612/slide55.png

)

なお、TLocationSensor をフォームに配置した時点では、プロパティの Active が False の状態です。アプリ起動時点で TLocationSensor を有効にしたい場合は、Active = True に設定しておきます。

![TLocationSensorのプロパティ設定](https://community.embarcadero.com/uploads/10818/20170612/slide125.png

)

現在位置の地図表示(Webブラウザ使用)

LocationSensor で取得した緯度経度を用いて地図表示するWebページを TWebBrowser で表示させれば、アプリケーション内で地図表示ができます。

例えば Googleマップでは、指定した緯度経度の地図を以下のようなURLで表示可能です。

https://maps.google.com/maps?q=(Latitude-value),(Longitude-value)

では、このような処理を行うコードをDelphi/C++で実装してみることにしましょう。


procedure TForm1.LocationSensor1LocationChanged(Sender: TObject;

  const OldLocation, NewLocation: TLocationCoord2D);

var

  GoogleMapURL_Base: String;

  GoogleMapURL: String;

begin

  // 特定の緯度経度の地図をGoogleMaps で開くためのURL

  GoogleMapURL_Base

    := 'https://maps.google.com/maps?q=%s,%s';

  // 緯度経度の情報を整形してListBoxに出力する

  lbLatitude.ItemData.Detail

    := Format( '%2.6f', [NewLocation.Latitude]  );

  lbLongitude.ItemData.Detail

    := Format( '%3.6f', [NewLocation.Longitude] );

  // 緯度経度の情報を含めたURLを生成してTWebBrowserで開く

  GoogleMapURL := Format(

    GoogleMapURL_Base,

    [

      lbLatitude.ItemData.Detail,

      lbLongitude.ItemData.Detail

    ]

  );

  WebBrowser1.Navigate(GoogleMapURL);

end;

void __fastcall TForm1::LocationSensor1LocationChanged(TObject *Sender, const TLocationCoord2D &OldLocation,

          const TLocationCoord2D &NewLocation)

{

  // 特定の緯度経度の地図をGoogleMaps で開くためのURL

    String GoogleMapsURL_Base

        ="https://maps.google.com/maps?q=%s,%s";

  // 緯度経度の情報を整形してListBoxに出力する

    lbLatitude->ItemData->Detail

        = String().sprintf(L"%2.6f", NewLocation.Latitude);

    lbLongitude->ItemData->Detail

        = String().sprintf(L"%3.6f", NewLocation.Longitude);

  // 緯度経度の情報を含めたURLを生成してTWebBrowserで開く

    TVarRec vr[] =

        {

            lbLatitude->ItemData->Detail,

            lbLongitude->ItemData->Detail

        };

    WebBrowser1->Navigate(Format(GoogleMapsURL_Base, vr, 2));

}

その他の補足事項

今回の説明では Google マップをブラウザで表示させているだけですが、もっと高機能な処理を行いたい場合は Google Maps API の利用を検討してください。

特に、今回のビデオでは説明を省略しているのですが、

TMapView のコンポーネントを用いれば、iOSとAndroidでOS標準機能n地図を用いたアプリが実装できます。ただしAndroid向けのビルドでは、Google Maps Android API の APIキーが必要です

これについては、下記2つのURLを併せてご参照ください。

http://docwiki.embarcadero.com/RADStudio/Tokyo/ja/Google_マップを使用できるよう_Android_アプリケーションを構成する

https://developers.google.com/maps/documentation/android-api/signup?hl=ja

 



About
Gold User, No rank,
Sales Consultant at Embarcadero Technologies, in Japan.

Comments

Check out more tips and tricks in this development video: