急いでいます！

表示されている地図の大きさに連動して、表示中のマーカーのリストの数を変えていく方法は？

解決済

質問者：sheyma
質問日時：2017/02/12 02:18
回答数：1件

こんはんばー。
現在、phpををつかって、sqlから引っ張った名前、緯度、経度、電話番号のデータをもとに描画し、sqlの検索結果の一覧が地図の下に羅列されている状態です。
（イメージは不動産サイトの「地図から探す」です）
見ている人が地図を縮小・拡大するにしたがって、もちろん表示されているマーカー数は変化しますが、今のままでは、php側で絞り込みしているので、それができないときづいてしまいました。
js側で絞込をする場合、どのタイミングで緯度経度の範囲をしていればいいのか、むしろ緯度経度の範囲指定を追記するだけでこのコードは動くのかおしえてください。
よろしくお願いいたします。

<?php
/*** get_markers.php抜粋*/
$sql = 'SELECT';
$sql .= ' `ido`';
$sql .= ', `keido`';
$sql .= ', `name` ';
$sql .= ', `tel` ';
$sql .= 'FROM `table`';
$sql .= 'WHERE 1 ';
//$sql .= 'AND `ido` BETWEEN :min_lat AND :max_lat ';
//$sql .= 'AND `keido` BETWEEN :min_lng AND :max_lng ';
//↑ここじゃない
$stmt = $pdo->prepare($sql);
$stmt->bindValue(':min_lat', $min_lat);
$stmt->bindValue(':max_lat', $max_lat);
$stmt->bindValue(':min_lng', $min_lng);
$stmt->bindValue(':max_lng', $max_lng);
$stmt->execute();
$rows = $stmt->fetchAll();
header('Content-type: application/json; charset=utf-8');
echo json_encode($rows);
} catch (Exception $ex) {
header('Content-type: application/json');
}

<!DOCTYPE HTML>
<html lang="ja">
<head><meta charset="UTF-8"><title></title></head>
<body>
<div id="map" data-lat="35" data-lng="136"></div>
<ul id="lists"><li>test</li></ul>
<script>
"use strict";
function initMap() {
var div = document.getElementById('map');
var map = new google.maps.Map(div, {
zoom: 15,
center: {
lat: parseFloat(div.getAttribute('data-lat'))
, lng: parseFloat(div.getAttribute('data-lng'))
}
});
　　　　　var markers = [];
var ul = document.getElementById('lists');
var str;
var xhr = new XMLHttpRequest();
map.addListener('idle', function () {
xhr.onreadystatechange = function ()
{
console.debug(this);
if (this.readyState === 4 && this.status === 200)
{
var response = this.response;
for (var i = 0; i < response.length; i++)
{
markers[i] = new google.maps.Marker({

position: {
lat: parseFloat(response[i].ido)
, lng: parseFloat(response[i].keido)
},
map: map
});

//リスト表示
var str = "";
str +='<li><p>' + response[i].name +'<br>' + response[i].tel+'</p></li>';
ul.innerHTML +=str;
}//for

} else if (this.status === 500) {
}//if
};

var sw = map.getBounds().getSouthWest(); //地図の緯度経度取得
var ne = map.getBounds().getNorthEast();

var url = 'get_markers.php?';
url += 'min_lat=' + sw.lat();
url += '&max_lat=' + ne.lat();
url += '&min_lng=' + sw.lng();
url += '&max_lng=' + ne.lng();

xhr.responseType = 'json';
xhr.open('GET', url, true);
xhr.send(null);
});//addListener

}//iniMap

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=ーーー&callback=initMap" async defer></script>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2017/02/13 09:55

こんにちは

＞js側で絞込をする場合、どのタイミングで緯度経度の範囲をしていれば～～
ご質問が、単にリストの表示/非表示を制御したいだけという意味なら、表示中の範囲に入っているかいないかでリストの表示制御をすれば良いと思われます。
タイミングとしては、「初期表示時」と「ユーザが地図を移動/拡大/縮小した時」ですね。
ユーザによる表示範囲の変更は、map classのbounds_changedイベントで取得可能と思います。

範囲を移動したときに、再度データをsqlから取得し直したいという意味でしたら、ajaxで取得すれば良いのですが、少しでも変更する度にリクエストしていたのでは煩雑すぎるでしょうから、ある程度のエリアを設定しておいて、そのエリア単位で読み込むなどといった工夫が必要になると思います。
（データ取得済みエリアをチェックしておいて、未取得エリアが表示されたらリクエストするとか…）

全体のデータ量にもよりますが、さほど多くない場合は、最初に全部読み込んでしまって、表示/非表示の制御だけですましてしまうのが簡単だとは思いますが…

ご質問とは関係はありませんが・・・
マーカの密度がわかりませんが、縮小表示するとマーカだらけになってしまうような場合は、「地図のzoomに応じて表示するマーカを絞る」ようにするとか、あるいは、「何か所かをまとめてグループ化して表示する」ようなことも必要かもしれませんね。