0

私のウェブサイトにはガソリンスタンドに関するデータがあり、ガソリンの品質とこれらのガソリンスタンドのGPS位置を測定しています。

私の考えは、flightradar24.comのように、それらのガソリンスタンドのアドレスをピンで指し示すように、私のWebサイト内でGoogleマップを使用することです。そして、これらのそれぞれをクリックすると、ガスとディーゼルの品質に関する情報がバルーンに表示されます。

他のオプションは、ピンがクリックされたときに、マップのない別のページに移動して、より詳細な情報を表示することです。

kmlまたはjavascriptコマンドでそれを行うことができますが、どうすればよいですか？Kmlは私のサーバーからのphp呼び出しによって挿入されますか、それともjsによって挿入されますか？

これを達成する方法は？

4

2 に答える 2

1

コーディングが非常に簡単なもう1つのオプションは、GoogleFusionTablesを使用することです。基本についてはこちらをご覧ください。基本的に、ガソリンスタンドの緯度/経度を使用してGoogleドライブでFusion Table（スプレッドシートなど）を作成し、簡単なJavascript呼び出しを送信して取得し、ページに表示します。インフォウィンドウとポイントのすべてのスタイル設定は、FusionTableページのコードなしで実行できます。

Fusion Tablesでflightradar24Webサイトをエミュレートするのは難しいでしょうが、あなたの投稿から、FusionTablesが提供できる以上のものは必要ないと思います。

于 2013-03-01T16:46:22.050 に答える
0

最新バージョンのGoogleMapsAPIを使用していると仮定すると、これを行うにはいくつかの方法があります。
a）必要なポイントや形状を含むkmlファイルを作成し、それを地図上に表示することができます。b
）場所（ガソリンスタンド）のリストを繰り返し処理し、マーカーマネージャーを使用して個々のピンを地図に追加します。

どちらの解決策もかなりうまくいくでしょう、そしてそれは本当にあなたが何をしたいかに依存します。オプションBを使用して、サーバーからJSON形式の場所の配列を取得し、マーカーマネージャーを使用してそれらを地図に表示する方がおそらく簡単だと思います。その後、マーカーがクリックされたときに、追加のマークアップを表示したり、リダイレクトしたりできます。

JSON配列は、次のように単純にすることができます。 

[
{title:'Station A', latitude: 38.91912, longitude: 7.123121},
{title:'Station B', latitude: 34.81291, longitude: 30.87173},
{title:'Station C', latitude: 31.00123, longitude: 13.184918}
]

MarkerManagerスクリプトルートへのリンクは次のとおりです（http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/）。いくつかの簡単な例については、examplesフォルダーを確認してください。docsフォルダーにはいくつかの詳細がありますが、現時点ではそれらのページは適切にレンダリングされていないようです。

マップAPIを使用してKMLレイヤーを表示するには、ターゲットのKMLレイヤーにGoogleのサーバー（つまり、パブリックサーバーでホストされているサーバー）からアクセスできるようにする必要があります。その後、このコードはあなたを野球場に連れて行くはずです：

var map; // Reference to your map object you created with 'new google.maps.Map()'  
var url = http://url.to/your.kml;
var kml = new google.maps.KmlLayer(url);
kml.setMap(map);

レイヤーを削除するには、次のコードを使用します（kml変数が上記で作成したKmlLayerへの参照であると想定）。

kml.setMap(null);

Google Maps APIドキュメントのKmlLayerクラスへのリンクは次のとおりです：https ：//developers.google.com/maps/documentation/javascript/reference？hl = fr＃KmlLayer

于 2013-02-27T18:49:59.477 に答える