Google Map API を使用して Beego に地図機能を実装する

Beego は Go 言語をベースにした Web フレームワークで、多くの利便性と最適化を提供し、Web アプリケーションの開発をより効率的にし、エラーを減らします。その中で、Beego は、Web アプリケーションに共通の地図機能を実装するために、Google Maps API などのサードパーティ サービスの統合もサポートしています。

Google Maps API は、地図および測位サービスを提供する API インターフェイスであり、Web アプリケーションの開発で広く使用されています。 BeegoアプリケーションにGoogle Maps APIライブラリを導入することで、Webアプリケーション上で地図表示、位置アノテーション、ルート計画などの機能を簡単に実装できます。

以下では、開発者が Google Maps API を使用して地図関数を実装できるように、詳細な手順を説明します。

ステップ 1: Google Maps APIkey の申請

Google Maps API を使用する開発プロセスを開始する場合、APIkey を取得するために開発者アカウントを申請する必要があります。具体的な手順は次のとおりです。

1. Google Developers Platform (https://console.developers.google.com/) にログインします。
2. 新しいプロジェクトを作成し、プロジェクト内で Maps JavaScript API を有効にします。
3. [認証情報] メニューから [認証情報の作成] を選択して、対応する APIkey を作成します。
4. APIkey で Maps JavaScript API を有効にします。
5. APIkey を使用して Maps JavaScript API にアクセスする場合は、リクエストが正しいドメインを指すようにしてください (http://localhost:8080 と http://yourdomain.com の両方を個別にリストする必要があります)。

適用された APIkey を保存します。この APIkey は後続の開発で使用されます。

ステップ 2: Google Maps API ライブラリを導入する

Beego アプリケーションで Google Maps API を使用する最初のステップは、そのライブラリ ファイルを導入することです。具体的な方法は次のとおりです。

1. Beego アプリケーションに静的フォルダーを追加し、その中に js フォルダーを追加します。
2. js フォルダーに新しい js ファイルを作成して、Google Maps API を保存します (例: google_maps_api.js)。
3. google_maps_api.js ファイルに、Google Maps API を導入する次のコードを追加します。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[APIkey]&libraries=places"></script>

上記の [APIkey] は、最初の一歩。

ステップ 3: Google Maps API マップの開発

Google Maps API を導入した後、Beego アプリケーションで Google Maps API マップの開発を開始できます。具体的な方法は次のとおりです。

1. Beego アプリケーションに新しいコントローラーを追加し、MapController という名前を付けます。
2. MapController にアクション関数を追加し、MapView という名前を付けます。
3. MapView 関数では、マップのレンダリングに使用される div 要素を含む HTML ページをレンダリングします。例:

func (c *MapController) MapView() {
   c.TplName = "map_view.tpl"
}

注: map_view.tpl はテンプレート ファイル名です。については後述します。

4. 次のコードをmap_view.tplに追加してマップ要素を作成します:

<div id="google-map"></div>

5. 次のJavaScriptコードをmap_view.tplに追加してGoogleマップを作成しますAPIマップ：

<script>
   var map;
   function initMap() {
     map = new google.maps.Map(document.getElementById('google-map'), {
       center: {lat: 40.748817, lng: -73.985428},
       zoom: 15
     });
   }
   initMap();
</script>

このうち、centerは地図の中心座標を指定し、zoomは地図のズームレベルを指定します。

この時点で、Google Maps API を使用して地図が正常に作成され、Beego アプリケーションに表示されています。

ステップ 4: 地図上に位置をマークする

地図上に位置をマークすることは、地図アプリケーションの中核機能の 1 つです。 Google Maps API を使用すると、地図上に位置をマークする機能を簡単に実装できます。具体的な方法は次のとおりです:

1. MapView で、位置をマークするために使用する Marker オブジェクトを定義します。マーカー。
2. 地図を初期化する JavaScript コードに、次のコードを追加して、Marker オブジェクトを作成し、地図にバインドします:

var marker = new google.maps.Marker({
   position: {lat: 40.748817, lng: -73.985428},
   map: map,
   title: 'New York, NY',
   icon: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png'
});

注: 上記の座標、アイコンcode とタイトルは実際のニーズに応じて設定する必要があります。

この時点で、地図上に場所が正常にマークされました。

ステップ 5: ルート計画

Google Maps API を使用して、地図上の 2 点間の最適なルートを計画することもできます。実装プロセスは次のとおりです。

1. MapView で、開始点と終了点の識別に使用される 2 つの Marker オブジェクト (originMarker と destinationMarker など) を定義します。
2. ルートの描画に使用する DirectionsService オブジェクトを定義します (たとえば、directionsService)。
3. 地図を初期化する JavaScript コードに、次のコードを追加して、起点と終点のマーカーを設定し、それらを地図にバインドします:

var originMarker = new google.maps.Marker({
   position: {lat: 40.748817, lng: -73.985428},
   map: map,
   title: 'New York, NY'
});

var destinationMarker = new google.maps.Marker({
   position: {lat: 40.733002, lng: -73.989696},
   map: map,
   title: 'Brooklyn, NY'
});

4. MapView で、ルートを描画するための JavaScript 関数 (例: getDirections) を追加します。
5. getDirections 関数に、ルートにサービスを提供する次のコードを追加します。

var directionsService = new google.maps.DirectionsService();

var request = {
   origin: {lat: 40.748817, lng: -73.985428},
   destination: {lat: 40.733002, lng: -73.989696},
   travelMode: google.maps.TravelMode.DRIVING
};

directionsService.route(request, function(result, status) {
   if (status == 'OK') {
     var directionsDisplay = new google.maps.DirectionsRenderer();
     directionsDisplay.setMap(map);
     directionsDisplay.setDirections(result);
   }
});

注: 上記のコードの座標は、実際のニーズに応じて構成する必要があります。

この時点で、地図上の 2 点間のルートの計画が完了しました。

概要

上記の手順により、Google Maps API を使用した地図機能を Beego アプリケーションに実装することができました。マップ関数はWebアプリケーション開発でよく使われる機能で、開発者向けの実装ガイドとしてサンプルコードを掲載しています。

以上がGoogle Map API を使用して Beego に地図機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。