現在、railsでGooglemapの実装をおこなっています。
その際に、DBに登録されているデータからその緯度経度にピンを刺すという処理はできたのですが、
そのマップの範囲内の一覧を作りたいと思っています。
調べたところ範囲内の緯度経度を取得し、それをコントローラーで処理すれば良いのかなと考えたのですが、
javascriptからコントローラーへの非同期処理の記述とコントローラー側での処理がうまく分かりません。
javascript
1google.maps.event.addListener(map, 'idle',function() { 2 var mapMarkerData = []; 3 4 //地図の範囲内を取得 5 var bounds = map.getBounds(); 6 mapNE_lat = bounds.getNorthEast().lat(); 7 mapSW_lat = bounds.getSouthWest().lat(); 8 mapNE_lng = bounds.getNorthEast().lng(); 9 mapSW_lng = bounds.getSouthWest().lng(); 10 11 console.log(mapNE_lat); 12 console.log(mapSW_lat); 13 console.log(mapNE_lng); 14 console.log(mapSW_lng); 15 16$.ajax({ 17 url: '/items/search?mapNE_lat=${mapNE_lat}&mapNE_lng=${mapNE_lng}&mapSW_lat=${mapSW_lat}&mapSW_lng=${mapSW_lng}', 18 type: 'GET', 19 dataType: 'json', 20 timeout: 1000, 21 error: function(){ 22 alert("地図データの読み込みに失敗しました"); 23 }, 24 success: function(json){ 25 const list = document.getElementById("list"); 26 const html = ` 27 <% map_item.each do |item| %> 28 <li class='list'> 29 <div class='item-info'> 30 <h5 class='item-name2'> 31 <%= item.name %></h5> 32 <h5 class='item-name'> 33 <%= item.address %></h5> 34 <div class='item-img-content'> 35 <%= image_tag item.image, class: "item-img" %> 36 </div> 37 </div> 38 </li> 39 <% end %>`; 40 list.insertAdjacentHTML("afterend", html); 41 }, 42}); 43});
ここでマップ表示の緯度経度を取得して、コントローラーに送りたいと考えています。
そして帰ってきたデータを"list"idのところへ表示したいと考えています。
itemsコントローラー
1def search 2 @items = Item.all 3 gon.items = @items 4 5 map_item = Item.where(lat: lat >= mapNE_lat, lat: lat <= mapSW_lat, lng: lng >= mapNE_lng, lng: <= mapSW_lng) 6 render json:{ map_item: map_item } 7 end
現状これだとコントローラー側でエラーが起きます。
whereの検索条件がおかしいのはわかるのですが、どのようにマップの緯度経度内のデータを取得する記述をすれば良いのか分かりません。
またコントローラー側で多分if文などで
itemsコントローラー
1def search 2 @items = Item.all 3 gon.items = @items 4 if _**ajax通信が行われたとき**_ 5 map_item = Item.where(lat: lat >= mapNE_lat, lat: lat <= mapSW_lat, lng: lng >= mapNE_lng, lng: <= mapSW_lng) 6 render json:{ map_item: map_item } 7 end 8 end
と記述しないとページを開いた時点で処理がされてしまい、mapNE_latの値がないまま進んでしまうと考えていますが、ajax通信が行われたときというif条件式が調べても分かりませんでした。
質問が複数になってしまい申し訳ありません。
わかるものだけで構いませんのでどうかご教授ください。
追記
別のやり方としてこんなのも考えたのですが、うまくいきません。
どちらでも処理が行えればいいのですが、こちらはうまく値を表示できなくて困ってます。
うまく名前や住所を表示して挿入できないでしょうか
javascript
1let items = gon.items; 2google.maps.event.addListener(map, 'idle',function() { 3 var mapMarkerData = []; 4 5 //地図の範囲内を取得 6 var bounds = map.getBounds(); 7 mapNE_lat = bounds.getNorthEast().lat(); 8 mapSW_lat = bounds.getSouthWest().lat(); 9 mapNE_lng = bounds.getNorthEast().lng(); 10 mapSW_lng = bounds.getSouthWest().lng(); 11 12 // console.log(mapNE_lat); 13 // console.log(mapSW_lat); 14 //console.log(mapNE_lng); 15 // console.log(mapSW_lng); 16 17 const list = document.getElementById("list"); 18 19 20 var j = 0; 21 for (var i = 0; i < items.length; i++) { 22 if (mapNE_lat >= items[i]['lat'] && items[i]['lat'] >= mapSW_lat) { 23 if (mapNE_lng >= items[i]['lng'] && items[i]['lng'] >= mapSW_lng) { 24 var name = items[i]['name'] 25 var address = items[i]['address'] 26 var image = items[i]['image'] 27 j++; 28 list.insertAdjacentHTML(`afterend`, ` 29 <div class='item-info'> 30 <h5 class='item-name2'> 31 <%= name %></h5> 32 <h5 class='item-name'> 33 <%= address %> 34 </h5> 35 <div class='item-img-content'> 36 <%= image_tag image, class: "item-img" %> 37 </div> 38 </div> 39 `); 40 } 41 } 42 }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。