Googleは、選択したドロップダウンに基づいてGoogleマップにマーカーを配置しようとしています。私はデータベースからの結果を持っているXML文書に関する私の私の文書を持っています。私は選択したドロップダウンに基づいてそのXML文書から結果を取得したいと思います。それらのマーカーを地図上に配置したいと思います。これについての最善の方法に関するアイデアはありますか?私は可能な限りPHPを使用したいと思います。HTMLに基づいてスクリーンにGoogleマップマーカーを追加する選択
-1
A
答えて
1
JavaScriptを使用する必要があるGoogleマップを使用して地図上にマーカーをペイントするために、PHPの一部のみを使用することができます。ここでは、Googleマップをロードしてその上にマーカーを表示する方法の非常に基本的な例を示します。明らかに、データソースを繰り返し処理して、それを使用して選択リストにオプション値を設定する必要があります。潜在的なアイテムをたくさん扱っている場合は、オプションの値を別のhttpリクエスト(たとえばajaxを使用)で取得するのが理にかなっています。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Map</title>
<script src="http://maps.google.com/maps?file=api&v=3&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
var male = [[39.167107,-86.534363],[39.130554,-85.128891]];
var female = [[39.167107,-84.534363],[38.130554,-83.128891]];
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.167107,-86.534363), 7);
map.setUIToDefault();
}
}
function addMarker(){
var select = document.getElementById("choose_option");
var currentValue = select.options[select.selectedIndex].value;
if (currentValue == "Male")
{
for (i=0;i<male.length;i++){
var markerPoint = new GLatLng(male[i][0], male[i][1]);
var marker = new GMarker(markerPoint, {draggable: true, bouncy: true});
map.addOverlay(marker);
}
}
else if (currentValue == "Female")
{
for (i=0;i<female.length;i++){
var markerPoint = new GLatLng(female[i][0], female[i][1]);
var marker = new GMarker(markerPoint, {draggable: true, bouncy: true});
map.addOverlay(marker);
}
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<select id="choose_option" onchange="addMarker()">
<option id="1" value="">Choose</option>
<option id="2" value="Male">Male</option>
<option id="3" value="Female">Female</option>
</select>
</body>
</html>
関連する問題
- 1. 選択に基づく値の追加
- 2. Googleマップマーカー - カテゴリに基づくフィルタリング
- 3. HTML選択オプション値に基づいて別の要素を選択するCSS
- 4. 選択したポイントにマップマーカーを追加する
- 5. テキストパターンに基づいて行を選択
- 6. 選択に基づく追加のコンテンツを表示
- 7. HTML For Loopユーザーが選択した番号に基づいて
- 8. jQuery - クラス名に基づいてHTMLを追加
- 9. 値に基づいて選択オプションを無効にする* HTMLのみ!*
- 10. レコードの選択アソシエーション数に基づいて(参加?)
- 11. 属性に基づいたjavascriptでHTML要素を選択
- 12. 選択ボックスの選択に基づいて入力フィールドを無効にする
- 13. デバイスタイプに基づいて異なるストーリーボードを選択する
- 14. 別の選択の値に基づいて選択値を変更する
- 15. HTMLの更新選択/オプション値に基づいていますか?
- 16. コンボボックスの選択に基づいてHTMLレイアウトを変更します
- 17. divのクリックでGoogleマップマーカーを追加
- 18. カラム/テーブル名に基づいてインデックスを選択する
- 19. SQLクエリ - カウント条件に基づいてレコードを選択する
- 20. 選択したオプションに基づいてテキストフィールドを変更する
- 21. IPアドレスに基づいて色を選択する
- 22. ComboBoxでの選択に基づいてTextBlockをバインドする
- 23. 文字列に基づいてdata.frameの行を選択する
- 24. 選択に基づいて関連グループボックスを更新するフォーム
- 25. バインディングに基づいてXAMLでブラシを選択する方法
- 26. Pythonのパラメータ型に基づいて関数を選択する
- 27. マウスの選択に基づいてオブジェクトをドラッグするOpengl
- 28. Django:選択オプションに基づいてインラインを変更する
- 29. 日付範囲に基づいてトランザクションを選択する
- 30. ビットマスクに基づいてワイヤの範囲を選択する
これは大きな助けであり、ありがとうございます。しかし、私のオプションは男性と女性だけに固定されています。どちらか一方を選択すると、xmlドキュメントの男性または女性のエントリのみをマップに配置します。それ以上の洞察? – Dude
XML文書の一部を参照として貼り付けることはできますか? – javram
' '------>だから、選択オプションが選択されている場合は、男性の項目のみを返したい。 –
Dude