sqlのselect文で、抽出した結果(名前・緯度・経度)を地図に描画し、地図の下に検索結果の一覧をだすところまではできました。さらに地図の表示領域の変化に伴い一覧の表示数を変更したいです。(MYSQLで検索抽出しています)
検索したデータをさらに地図の範囲で絞込する必要がありますがやりかたがわかりません。
どんな命令を順次だしていけばいいのか混乱しています。
###疑問点
検索結果をXMLにするべきか?
地図の大きさの変化と連動して、範囲の値を取得するには、phpではなくJavasで絞込をしたほうがいいのでしょうか?(このままではsubmitされたときしか値がわたせないため)
下のように2段階目の検索はどうかけたらいいのでしょうか?
(この命令であっているのかも不明です)
foreach($markerData as $val){ if( $val["lat"] < $ne_lat && $val["lat"] > $sw_lat && $val["lng"] < $ne_lng && $val["lng"] > $sw_lng){ //範囲でさらにしぼる } }
###今のソースコード(全件表示されている状態)
<?php //範囲データ取得) $ne_lat = $_POST["ne_lat"]; $sw_lat = $_POST["sw_lat"]; $ne_lng = $_POST["ne_lng"]; $sw_lng = $_POST["sw_lng"]; print("<p>".$sw_lng."代入の確認</p>"); //代入の確認 // MySQLへ接続 //値をうけとる $a=$_POST['a']; $b=$_POST['b']; $c=$_POST['c']; $d=$_POST['d']; $e=$_POST['e']; $check=""; if(isset($a)){$check=$check."and menu like '%mカット%' ";} if(isset($b)){$check=$check."and menu like '%mシェービング%' ";} if(isset($c)){$check=$check."and menu like '%mカラー%' ";} if(isset($d)){$check=$check."and menu like '%mパーマ%' "; } if(isset($e)){$check=$check."and menu like '%mアイロンパーマ%' ";} if(empty($check)){ $meirei="SELECT * FROM riyou"; }else{ $check = substr($check, 4); $meirei="SELECT * FROM riyou WHERE $check;"; } $result=mysql_query($meirei)or die("クエリの送信に失敗しました"); //結果セットの行数を取得する $rows = mysql_num_rows($result); //表示するデータを作成 while($row = mysql_fetch_array($result)) { $markerData.="{name:'".$row["name"]."', lat:".$row["ido"].",lng:".$row["keido"]."},\n";} ?> <html> <form action="menu.php" method="post"> <ul class="menu"> <li><input type="checkbox" name="a" value="mカット" />カット</li> <li><input type="checkbox" name="b" value="mシェービング" />シェービング</li> <li><input type="checkbox" name="c" value="mカラー" />カラー</li> <li><input type="checkbox" name="d" value="mパーマ" />パーマ </li> <li><input type="checkbox" name="e" value="mアイロンパーマ" />アイロンパーマ</li> </ul> <p class="clear"><input type="submit" value="検索" class="sbmt"/></p> </form> <!--map--> <div id="gmap"> <input id="n_lat" type="text" name="ne_lat" value="">//確認用にhiddenをtext <input id="s_lat" type="hidden" name="sw_lat" value=""> <input id="n_lng" type="hidden" name="ne_lng" value=""> <input id="s_lng" type="hidden" name="sw_lng" value=""> <div id="sample"></div> </div> </html> <!--地図関連 --> <script type="text/javascript"> var map; var marker = new Array(); var infoWindow = []; var markerData = [ // マーカーを立てる場所名・緯度・経度 <?php echo $markerData; ?> ]; var center = { lat: 35.31822074788113, // 緯度 lng: 136.78940892219543 // 経度 }; function initMap() { map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む center: center, zoom: 12 // 地図のズームを指定 }); //イベント登録 地図の表示領域が変更されたらイベントを発生させる google.maps.event.addListener(map, 'idle', function(){ setPointMarker(); }); } function setPointMarker(){ //地図の範囲内を取得 var bounds = map.getBounds(); ne_lat = bounds.getNorthEast().lat(); sw_lat = bounds.getSouthWest().lat(); ne_lng = bounds.getNorthEast().lng(); sw_lng = bounds.getSouthWest().lng(); //alert(sw_lng); ※取得確認 //地図範囲を代入 document.getElementById('ne_lat').value=ne_lat; document.getElementById('sw_lat').value=sw_lat; document.getElementById('ne_lng').value=ne_lng; document.getElementById('sw_lng').value=sw_lng; //地図範囲のデータの抽出 // マーカー毎の処理 for (var i = 0; i < markerData.length; i++) { markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); // 緯度経度のデータ作成 marker[i] = new google.maps.Marker({ // マーカーの追加 position: markerLatLng, // マーカーを立てる位置を指定 map: map // マーカーを立てる地図を指定 }); infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加 content: '<div class="sample">' + markerData[i]['name'] + '</div>' // 吹き出しに表示する内容 }); markerEvent(i); // マーカーにクリックイベントを追加 }; // マーカーにクリックイベントを追加 function markerEvent(i) { marker[i].addListener('click', function() { // マーカーをクリックしたとき infoWindow[i].open(map, marker[i]); // 吹き出しの表示 }); }; } </script>
###補足情報
自分でもよく理解できていないので、説明になっていないと思いますが、よろしくお願いもうしあげます。
回答2件
あなたの回答
tips
プレビュー