sqlの検索結果を現在表示されている範囲内のマーカーだけリストと共に表示する

sqlのselect文で、抽出した結果（名前・緯度・経度）を地図に描画し、地図の下に検索結果の一覧をだすところまではできました。さらに地図の表示領域の変化に伴い一覧の表示数を変更したいです。（MYSQLで検索抽出しています）

検索したデータをさらに地図の範囲で絞込する必要がありますがやりかたがわかりません。
どんな命令を順次だしていけばいいのか混乱しています。

###疑問点
検索結果をXMLにするべきか？
地図の大きさの変化と連動して、範囲の値を取得するには、phpではなくJavaｓで絞込をしたほうがいいのでしょうか？（このままでは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>

###補足情報
自分でもよく理解できていないので、説明になっていないと思いますが、よろしくお願いもうしあげます。

Lhankor_Mhy

2017/01/23 01:45

$_POST['a']と$_GET["ne_lat"]のようにPOSTとGETが混在していますが、これは問題ありませんか？　このままですと、カテゴリ？で検索した時には位置情報で検索できなさそうですが。

temari-s

2017/01/24 05:35

$_POST["ne_lat"]に書き換えてみましたが、中身が取得できていません。alertするとでてくるのでjavascriptで地図の範囲はとれているようです。

Lhankor_Mhy

2017/01/24 06:02

範囲データの取得のコードは見受けられるのですが、送信している部分のコードがないようです。ご提示いただくことは可能でしょうか。

kei344

2017/01/24 14:14

phpmyadmin ではなく MySQL ではないのでしょうか。phpmyadmin はデータベース管理ツールの名前です。https://ja.wikipedia.org/wiki/PhpMyAdmin

temari-s

2017/01/24 14:18

混同しておりました。MYSQLです

kei344

2017/01/24 14:42

質問タグと本文内の PhpMyAdmin は削除されたほうがよいです。

行動規範の内容に同意します

回答2件

ベストアンサー

#サンプルコード

コード書くだけで疲れたので、解説はしません。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			html, body {
8				padding: 0;
9				margin: 0;
10				height: 100%;
11				width: 100%;
12			}
13			#map {
14				background: #CCC;
15				height: 100%;
16				width: 100%;
17			}
18		</style>
19	</head>
20	<body>
21		<div id="map" data-lat="43" data-lng="141">
22
23		</div>
24		<script>
25			"use strict";
26			function initMap() {
27				var div = document.getElementById('map');
28				var map = new google.maps.Map(div, {
29					zoom: 4,
30					center: {
31						lat: parseFloat(div.getAttribute('data-lat'))
32						, lng: parseFloat(div.getAttribute('data-lng'))
33					}
34				});
35				var latlng;
36				var markers = [];
37				var xhr = new XMLHttpRequest();
38
39				map.addListener('idle', function () {
40
41					xhr.onreadystatechange = function ()
42					{
43						if (this.readyState === 4 && this.status === 200)
44						{
45							var response = this.response;
46							for (var i = 0; i < response.length; i++) {
47								markers[i] = new google.maps.Marker({
48									position: {
49										lat: parseFloat(response[i].lat)
50										, lng: parseFloat(response[i].lng)
51									},
52									map: map
53								});
54							}
55						} else if (this.status === 500) {
56							alert(this.response.errorMessage);
57						}
58					};
59
60					var sw = map.getBounds().getSouthWest();
61					var ne = map.getBounds().getNorthEast();
62
63					var url = 'get_markers.php?';
64					url += 'min_lat=' + sw.lat();
65					url += '&max_lat=' + ne.lat();
66					url += '&min_lng=' + sw.lng();
67					url += '&max_lng=' + ne.lng();
68
69					xhr.responseType = 'json';
70					xhr.open('GET', url, true);
71					xhr.send(null);
72				});
73			}
74		</script>
75		<script src="https://maps.googleapis.com/maps/api/js?key={API_KEY}&callback=initMap" async defer></script>
76	</body>
77</html>

php
1<?php
2
3/**
4 * get_markers.php
5 */
6ini_set('display_errors', true);
7error_reporting(E_ALL);
8
9try {
10	$dsn = 'mysql:host=localhost;dbname=shop;charset=utf8;';
11	$username = 'root';
12	$password = 'password';
13	$options = [
14		PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
15		, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
16	];
17
18	$min_lat = filter_input(INPUT_GET, 'min_lat');
19	$max_lat = filter_input(INPUT_GET, 'max_lat');
20	$min_lng = filter_input(INPUT_GET, 'min_lng');
21	$max_lng = filter_input(INPUT_GET, 'max_lng');
22
23	$pdo = new PDO($dsn, $username, $password, $options);
24
25	$sql = 'SELECT';
26	$sql .= ' `lat`';
27	$sql .= ', `lng`';
28	$sql .= ', `info` ';
29	$sql .= 'FROM `Shop`';
30	$sql .= 'WHERE 1 ';
31	$sql .= 'AND `lat` BETWEEN :min_lat AND :max_lat ';
32	$sql .= 'AND `lng` BETWEEN :min_lng AND :max_lng ';
33
34	$stmt = $pdo->prepare($sql);
35
36	$stmt->bindValue(':min_lat', $min_lat);
37	$stmt->bindValue(':max_lat', $max_lat);
38	$stmt->bindValue(':min_lng', $min_lng);
39	$stmt->bindValue(':max_lng', $max_lng);
40	$stmt->execute();
41
42	$rows = $stmt->fetchAll();
43
44// サンプルデータ
45//	$rows = [
46//		['lat' => '43', 'lng' => '141', 'info' => 'info1']
47//		, ['lat' => '42.5', 'lng' => '140.9', 'info' => 'info2']
48//		, ['lat' => '42', 'lng' => '140.8', 'info' => 'info3']
49//		, ['lat' => '41.5', 'lng' => '140.7', 'info' => 'info4']
50//		, ['lat' => '41', 'lng' => '140.6', 'info' => 'info5']
51//		, ['lat' => '40.5', 'lng' => '140.5', 'info' => 'info6']
52//	];
53//	例外発生時の確認
54//	throw new Exception('エラーが発生しました', 9999);
55
56	header('Content-type: application/json');
57	echo json_encode($rows);
58} catch (Exception $ex) {
59
60	header('Content-type: application/json');
61
62	// エラー発生時
63	http_response_code(500);
64	echo json_encode([
65		'errorMessage' => $ex->getMessage()
66		, 'errorCode' => $ex->getCode()
67	]);
68}

投稿2017/01/24 16:59

編集2017/01/24 17:34

退会済みユーザー

総合スコア0

temari-s

2017/01/25 14:12

ご丁寧に全文書いてくださったのですね！！菓子折り持ってお礼に伺いたいです。だた、知識のないまま手をだしたので、読み解くのにしばし時間がかかりそうです。取り急ぎ　お礼まで。ありがとうございました。

temari-s

2017/01/29 14:24

「こうしたらできました！」と数日以内に投稿する予定が、PDOが全く初めてで時間を要しました。そせっかくコートまでかいてくださったのにベストアンサーに今日までお選びできず失礼しました。

行動規範の内容に同意します

mysql_query は非推奨です。

【PHP: mysql_query - Manual】
http://php.net/manual/ja/function.mysql-query.php

警告この拡張モジュールは PHP 5.5.0 で非推奨になり、PHP 7.0.0 で削除されました。 MySQLi あるいは PDO_MySQL を使うべきです。

【PHPでデータベースに接続するときのまとめ - Qiita】← 必読
http://qiita.com/mpyw/items/b00b72c5c95aac573b71

ブラウザから位置情報をAjax通信でサーバに送り、PHPでデータをJSONで返し、JavaScriptでマーカーを再描画って感じでしょう。質問文に書かれている内容から察するにコードを書くことに慣れておられないようなので、少しずつ試していくのがよいと思います。

【jQuery：一般的なAjax通信を実装するには？（$.ajax） - Build Insider】
http://www.buildinsider.net/web/jqueryref/059

【filter_input関数を使って簡潔なコードを書こう - WebEngine】
http://web-engine.hatenadiary.com/entry/20160521/1463823327

【【PHP】MySQLに保存しているデータをJSONで吐き出す - Qiita】
http://qiita.com/fantm21/items/891192da1a095e94c9e1

MySQL5.6+なら空間データが扱えます。

【mysql空間テーブルの作り方 - Qiita】
http://qiita.com/kochizufan/items/a68b30ba74849483f75c

【第5回位置情報を保存しよう（前編）：位置情報サービスのはじめ方｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/location-based-services/0005

【MySQLのgeometry型で○km以内の場所を取得してみました - Qiita】
http://qiita.com/mitani/items/6909406ac4fe0db2d35c

投稿2017/01/24 16:14

kei344

総合スコア69407

temari-s

2017/01/25 14:04

ありがとうございます。普段コーディング専門です。ＳＱＬは2年ぶりにつかいました。ご推察の通りコードを書くことにまた検索魔になって何とか動いている状態です。ご提示いただきましたサイトページでお勉強します・・・。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

sqlの検索結果を現在表示されている範囲内のマーカーだけリストと共に表示する

関連した質問