質問編集履歴
5
misu
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -130,56 +130,4 @@
|
|
|
130
130
|
}
|
|
131
131
|
```
|
|
132
132
|
|
|
133
|
-
追記２
|
|
134
|
-
このような形でのAjax通信を行えばうまくいけるかと思って試したのですが、
|
|
135
|
-
params[:mapitem]が空と出てしまいます。。。
|
|
136
|
-
```javascript
|
|
137
|
-
let items = gon.items;
|
|
138
|
-
google.maps.event.addListener(map, 'idle',function() {
|
|
139
|
-
var map_item = [];
|
|
140
133
|
|
|
141
|
-
//地図の範囲内を取得
|
|
142
|
-
var bounds = map.getBounds();
|
|
143
|
-
mapNE_lat = bounds.getNorthEast().lat();
|
|
144
|
-
mapSW_lat = bounds.getSouthWest().lat();
|
|
145
|
-
mapNE_lng = bounds.getNorthEast().lng();
|
|
146
|
-
mapSW_lng = bounds.getSouthWest().lng();
|
|
147
|
-
|
|
148
|
-
// console.log(mapNE_lat);
|
|
149
|
-
// console.log(mapSW_lat);
|
|
150
|
-
//console.log(mapNE_lng);
|
|
151
|
-
// console.log(mapSW_lng);
|
|
152
|
-
|
|
153
|
-
const list = document.getElementById("list");
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
var j = 0;
|
|
157
|
-
for (var i = 0; i < items.length; i++) {
|
|
158
|
-
if (mapNE_lat >= items[i]['lat'] && items[i]['lat'] >= mapSW_lat) {
|
|
159
|
-
if (mapNE_lng >= items[i]['lng'] && items[i]['lng'] >= mapSW_lng) {
|
|
160
|
-
map_item[j] = items[i];
|
|
161
|
-
j++;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
console.log(map_item)
|
|
166
|
-
$.ajax({
|
|
167
|
-
url: '/items/search',
|
|
168
|
-
type: 'GET',
|
|
169
|
-
data: {
|
|
170
|
-
map_item: map_item
|
|
171
|
-
},
|
|
172
|
-
});
|
|
173
|
-
```
|
|
174
|
-
```itemコントローラー
|
|
175
|
-
def search
|
|
176
|
-
@items = Item.all
|
|
177
|
-
gon.items = @items
|
|
178
|
-
@map_item = params[:map_item]
|
|
179
|
-
end
|
|
180
|
-
```
|
|
181
|
-
console.log(map_item)までは
|
|
182
|
-
(2) [{…}, {…}]
|
|
183
|
-
と二つのデータがmap_itemに入っているのを確認できるのですが、
|
|
184
|
-
binding.pryでコントローラーでparams[:map_item]をみると
|
|
185
|
-
nilと出てしまいます。
|
4
改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
と記述しないとページを開いた時点で処理がされてしまい、mapNE_latの値がないまま進んでしまうと考えていますが、ajax通信が行われたときというif条件式が調べても分かりませんでした。
|
|
79
79
|
|
|
80
80
|
質問が複数になってしまい申し訳ありません。
|
|
81
|
-
どうかご教授ください。
|
|
81
|
+
わかるものだけで構いませんのでどうかご教授ください。
|
|
82
82
|
|
|
83
83
|
追記
|
|
84
84
|
別のやり方としてこんなのも考えたのですが、うまくいきません。
|
|
@@ -129,3 +129,57 @@
|
|
|
129
129
|
}
|
|
130
130
|
}
|
|
131
131
|
```
|
|
132
|
+
|
|
133
|
+
追記２
|
|
134
|
+
このような形でのAjax通信を行えばうまくいけるかと思って試したのですが、
|
|
135
|
+
params[:mapitem]が空と出てしまいます。。。
|
|
136
|
+
```javascript
|
|
137
|
+
let items = gon.items;
|
|
138
|
+
google.maps.event.addListener(map, 'idle',function() {
|
|
139
|
+
var map_item = [];
|
|
140
|
+
|
|
141
|
+
//地図の範囲内を取得
|
|
142
|
+
var bounds = map.getBounds();
|
|
143
|
+
mapNE_lat = bounds.getNorthEast().lat();
|
|
144
|
+
mapSW_lat = bounds.getSouthWest().lat();
|
|
145
|
+
mapNE_lng = bounds.getNorthEast().lng();
|
|
146
|
+
mapSW_lng = bounds.getSouthWest().lng();
|
|
147
|
+
|
|
148
|
+
// console.log(mapNE_lat);
|
|
149
|
+
// console.log(mapSW_lat);
|
|
150
|
+
//console.log(mapNE_lng);
|
|
151
|
+
// console.log(mapSW_lng);
|
|
152
|
+
|
|
153
|
+
const list = document.getElementById("list");
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
var j = 0;
|
|
157
|
+
for (var i = 0; i < items.length; i++) {
|
|
158
|
+
if (mapNE_lat >= items[i]['lat'] && items[i]['lat'] >= mapSW_lat) {
|
|
159
|
+
if (mapNE_lng >= items[i]['lng'] && items[i]['lng'] >= mapSW_lng) {
|
|
160
|
+
map_item[j] = items[i];
|
|
161
|
+
j++;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
console.log(map_item)
|
|
166
|
+
$.ajax({
|
|
167
|
+
url: '/items/search',
|
|
168
|
+
type: 'GET',
|
|
169
|
+
data: {
|
|
170
|
+
map_item: map_item
|
|
171
|
+
},
|
|
172
|
+
});
|
|
173
|
+
```
|
|
174
|
+
```itemコントローラー
|
|
175
|
+
def search
|
|
176
|
+
@items = Item.all
|
|
177
|
+
gon.items = @items
|
|
178
|
+
@map_item = params[:map_item]
|
|
179
|
+
end
|
|
180
|
+
```
|
|
181
|
+
console.log(map_item)までは
|
|
182
|
+
(2) [{…}, {…}]
|
|
183
|
+
と二つのデータがmap_itemに入っているのを確認できるのですが、
|
|
184
|
+
binding.pryでコントローラーでparams[:map_item]をみると
|
|
185
|
+
nilと出てしまいます。
|
3
記述ミス
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -86,6 +86,7 @@
|
|
|
86
86
|
うまく名前や住所を表示して挿入できないでしょうか
|
|
87
87
|
|
|
88
88
|
```javascript
|
|
89
|
+
let items = gon.items;
|
|
89
90
|
google.maps.event.addListener(map, 'idle',function() {
|
|
90
91
|
var mapMarkerData = [];
|
|
91
92
|
|
2
記述ミス
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -106,8 +106,8 @@
|
|
|
106
106
|
|
|
107
107
|
var j = 0;
|
|
108
108
|
for (var i = 0; i < items.length; i++) {
|
|
109
|
-
if (mapNE_lat >= items[i]['lat
|
|
109
|
+
if (mapNE_lat >= items[i]['lat'] && items[i]['lat'] >= mapSW_lat) {
|
|
110
|
-
if (mapNE_lng >= items[i]['
|
|
110
|
+
if (mapNE_lng >= items[i]['lng'] && items[i]['lng'] >= mapSW_lng) {
|
|
111
111
|
var name = items[i]['name']
|
|
112
112
|
var address = items[i]['address']
|
|
113
113
|
var image = items[i]['image']
|
1
別例
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -79,3 +79,52 @@
|
|
|
79
79
|
|
|
80
80
|
質問が複数になってしまい申し訳ありません。
|
|
81
81
|
どうかご教授ください。
|
|
82
|
+
|
|
83
|
+
追記
|
|
84
|
+
別のやり方としてこんなのも考えたのですが、うまくいきません。
|
|
85
|
+
どちらでも処理が行えればいいのですが、こちらはうまく値を表示できなくて困ってます。
|
|
86
|
+
うまく名前や住所を表示して挿入できないでしょうか
|
|
87
|
+
|
|
88
|
+
```javascript
|
|
89
|
+
google.maps.event.addListener(map, 'idle',function() {
|
|
90
|
+
var mapMarkerData = [];
|
|
91
|
+
|
|
92
|
+
//地図の範囲内を取得
|
|
93
|
+
var bounds = map.getBounds();
|
|
94
|
+
mapNE_lat = bounds.getNorthEast().lat();
|
|
95
|
+
mapSW_lat = bounds.getSouthWest().lat();
|
|
96
|
+
mapNE_lng = bounds.getNorthEast().lng();
|
|
97
|
+
mapSW_lng = bounds.getSouthWest().lng();
|
|
98
|
+
|
|
99
|
+
// console.log(mapNE_lat);
|
|
100
|
+
// console.log(mapSW_lat);
|
|
101
|
+
//console.log(mapNE_lng);
|
|
102
|
+
// console.log(mapSW_lng);
|
|
103
|
+
|
|
104
|
+
const list = document.getElementById("list");
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
var j = 0;
|
|
108
|
+
for (var i = 0; i < items.length; i++) {
|
|
109
|
+
if (mapNE_lat >= items[i]['latitude'] && items[i]['latitude'] >= mapSW_lat) {
|
|
110
|
+
if (mapNE_lng >= items[i]['studios'] && items[i]['studios'] >= mapSW_lng) {
|
|
111
|
+
var name = items[i]['name']
|
|
112
|
+
var address = items[i]['address']
|
|
113
|
+
var image = items[i]['image']
|
|
114
|
+
j++;
|
|
115
|
+
list.insertAdjacentHTML(`afterend`, `
|
|
116
|
+
<div class='item-info'>
|
|
117
|
+
<h5 class='item-name2'>
|
|
118
|
+
<%= name %></h5>
|
|
119
|
+
<h5 class='item-name'>
|
|
120
|
+
<%= address %>
|
|
121
|
+
</h5>
|
|
122
|
+
<div class='item-img-content'>
|
|
123
|
+
<%= image_tag image, class: "item-img" %>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
`);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
```
|