質問編集履歴

3

修正

2017/03/17 15:24

投稿

ssk
ssk

スコア332

test CHANGED
File without changes
test CHANGED
@@ -291,13 +291,3 @@
291
291
  window.onload = Yucho.initMap;
292
292
 
293
293
  ```
294
-
295
-
296
-
297
- ######エラー
298
-
299
- ```エラー
300
-
301
- Uncaught TypeError: Cannot read property 'getNorthEast' of undefined
302
-
303
- ```

2

修正

2017/03/17 15:24

投稿

ssk
ssk

スコア332

test CHANGED
File without changes
test CHANGED
@@ -136,7 +136,7 @@
136
136
 
137
137
  type: "GET",
138
138
 
139
- url: Yucho.jsonUrl + '?min_lat=' + Yucho.swLatLng.lat() + '&max_lat=' + Yucho.neLatLng.lat() + '&min_lng=' + Yucho.swLatLng.lng() + '&max_lng=' + Yucho.neLatLng.lng(),
139
+ url: Yucho.jsonUrl + '?min_lat=' + Yucho.swLatLng.lat + '&max_lat=' + Yucho.neLatLng.lat + '&min_lng=' + Yucho.swLatLng.lng + '&max_lng=' + Yucho.neLatLng.lng,
140
140
 
141
141
  dataType: "json",
142
142
 

1

修正

2017/03/17 15:24

投稿

ssk
ssk

スコア332

test CHANGED
File without changes
test CHANGED
@@ -64,7 +64,7 @@
64
64
 
65
65
  swLng:{},
66
66
 
67
- jsonUrl:"./map.json",
67
+ jsonUrl:'/ajaxtestmaps/testsearch.json',
68
68
 
69
69
  jsonData:{},
70
70
 
@@ -88,139 +88,125 @@
88
88
 
89
89
  Yucho.gMapInit();
90
90
 
91
+
92
+
93
+ // json読み込み
94
+
95
+ Yucho.getJson();
96
+
97
+
98
+
99
+ };
100
+
101
+
102
+
103
+ ///////////////////////////////////////////////////////////////////////
104
+
105
+ // googleMaps 初期設定
106
+
107
+ ///////////////////////////////////////////////////////////////////////
108
+
109
+ Yucho.gMapInit = function(){
110
+
111
+ Yucho.map = new google.maps.Map(document.getElementById('map'), {
112
+
113
+ center: {lat: Yucho.defLat, lng: Yucho.defLng},
114
+
115
+ zoom: Yucho.defZoom
116
+
117
+ });
118
+
119
+ };
120
+
121
+
122
+
123
+ ///////////////////////////////////////////////////////////////////////
124
+
125
+ // JSON読み込み
126
+
127
+ ///////////////////////////////////////////////////////////////////////
128
+
129
+ Yucho.getJson = function(){
130
+
131
+ // マップサイズ取得
132
+
133
+ Yucho.getMapSize();
134
+
135
+ $.ajax({
136
+
137
+ type: "GET",
138
+
139
+ url: Yucho.jsonUrl + '?min_lat=' + Yucho.swLatLng.lat() + '&max_lat=' + Yucho.neLatLng.lat() + '&min_lng=' + Yucho.swLatLng.lng() + '&max_lng=' + Yucho.neLatLng.lng(),
140
+
141
+ dataType: "json",
142
+
143
+ }).done(function(jsonDataList){
144
+
145
+ Yucho.jsonData = jsonDataList;
146
+
147
+ //$('#status_all').html(Yucho.jsonData.length);
148
+
149
+
150
+
151
+ // googleMaps アイドル設定
152
+
153
+ Yucho.gMapSetIdle();
154
+
155
+ });
156
+
157
+ };
158
+
159
+
160
+
161
+ ///////////////////////////////////////////////////////////////////////
162
+
163
+ // googleMaps アイドル設定
164
+
165
+ ///////////////////////////////////////////////////////////////////////
166
+
167
+ Yucho.gMapSetIdle = function(){
168
+
169
+ google.maps.event.addListener(Yucho.map, 'idle', function(){
170
+
171
+ Yucho.refleshMap();
172
+
173
+ });
174
+
175
+ };
176
+
177
+
178
+
179
+ ///////////////////////////////////////////////////////////////////////
180
+
181
+ // MAPリフレッシュ
182
+
183
+ ///////////////////////////////////////////////////////////////////////
184
+
185
+ Yucho.refleshMap = function() {
186
+
187
+
188
+
189
+ // マップサイズ取得
190
+
191
+ Yucho.getMapSize();
192
+
91
193
 
92
194
 
93
- // json読み込み
195
+ // マーカー削除
196
+
94
-
197
+ Yucho.markerArr.forEach(function(marker, idx) {
198
+
95
- Yucho.getJson();
199
+ marker.setMap(null);
200
+
201
+ });
96
202
 
97
203
 
98
204
 
99
- };
100
-
101
-
102
-
103
- ///////////////////////////////////////////////////////////////////////
104
-
105
- // googleMaps 初期設定
106
-
107
- ///////////////////////////////////////////////////////////////////////
108
-
109
- Yucho.gMapInit = function(){
110
-
111
- Yucho.map = new google.maps.Map(document.getElementById('map'), {
112
-
113
- center: {lat: Yucho.defLat, lng: Yucho.defLng},
114
-
115
- zoom: Yucho.defZoom
116
-
117
- });
118
-
119
- };
120
-
121
-
122
-
123
- ///////////////////////////////////////////////////////////////////////
124
-
125
- // JSON読み込み
126
-
127
- ///////////////////////////////////////////////////////////////////////
128
-
129
- Yucho.getJson = function(){
130
-
131
-
132
-
133
- $.ajax({
134
-
135
- type: "GET",
136
-
137
- url: Yucho.jsonUrl,
138
-
139
- dataType: "json"
140
-
141
- }).done(function(data){
142
-
143
- Yucho.jsonData = data.shop;
144
-
145
- $('#status_all').html(Yucho.jsonData.length);
146
-
147
-
148
-
149
- // googleMaps アイドル設定
150
-
151
- Yucho.gMapSetIdle();
152
-
153
- });
154
-
155
- };
156
-
157
-
158
-
159
- ///////////////////////////////////////////////////////////////////////
160
-
161
- // googleMaps アイドル設定
162
-
163
- ///////////////////////////////////////////////////////////////////////
164
-
165
- Yucho.gMapSetIdle = function(){
166
-
167
- google.maps.event.addListener(Yucho.map, 'idle', function(){
168
-
169
- Yucho.refleshMap();
170
-
171
- });
172
-
173
- };
174
-
175
-
176
-
177
- ///////////////////////////////////////////////////////////////////////
178
-
179
- // MAPリフレッシュ
180
-
181
- ///////////////////////////////////////////////////////////////////////
182
-
183
- Yucho.refleshMap = function() {
184
-
185
-
186
-
187
- // マップサイズ取得
188
-
189
- Yucho.getMapSize();
190
-
191
-
192
-
193
- // データ格納
194
-
195
- Yucho.boundsData = [];
196
-
197
- for (var i = 0, l = Yucho.jsonData.length; i < l; i++) {
198
-
199
- Yucho.storeDataToRectangle(Yucho.jsonData[i]);
200
-
201
- }
202
-
203
-
204
-
205
- // マーカー削除
206
-
207
- Yucho.markerArr.forEach(function(marker, idx) {
208
-
209
- marker.setMap(null);
210
-
211
- });
212
-
213
-
214
-
215
205
  // マーカー作成
216
206
 
217
207
  Yucho.createMarker();
218
208
 
219
-
220
-
221
- $('#status_bounds').html(Yucho.boundsLen);
209
+
222
-
223
-
224
210
 
225
211
  };
226
212
 
@@ -230,6 +216,10 @@
230
216
 
231
217
  // マップサイズ取得
232
218
 
219
+ //getSouthWest():表示領域の南西(左下)の頂点の地理座標を返す
220
+
221
+ //getNorthEast():領域の北東(右上)の頂点の地理座標を返す
222
+
233
223
  ///////////////////////////////////////////////////////////////////////
234
224
 
235
225
  Yucho.getMapSize = function() {
@@ -260,49 +250,17 @@
260
250
 
261
251
  ///////////////////////////////////////////////////////////////////////
262
252
 
263
- // データ格納(それぞれの短形領域へ)
264
-
265
- ///////////////////////////////////////////////////////////////////////
266
-
267
- Yucho.storeDataToRectangle = function(place) {
268
-
269
- Yucho.rectangleArrData[x][y] = [];
270
-
271
- var latlng = new google.maps.LatLng(place.lat,place.lng);
272
-
273
- if( Yucho.bounds.contains(latlng) ){
274
-
275
- var x = Math.floor( (Yucho.neLat - place.lat ) / Yucho.latDiff );
276
-
277
- var y = Math.floor( (place.lng - Yucho.swLng) / Yucho.lngDiff );
278
-
279
- Yucho.boundsData.push(place);
280
-
281
- Yucho.rectangleArrData[x][y].push(place);
282
-
283
- Yucho.boundsLen++;
284
-
285
- }
286
-
287
- };
288
-
289
-
290
-
291
- ///////////////////////////////////////////////////////////////////////
292
-
293
253
  // マーカー作成
294
254
 
295
255
  ///////////////////////////////////////////////////////////////////////
296
256
 
297
257
  Yucho.createMarker = function() {
298
258
 
299
- var dataLength = Yucho.rectangleArrData[x][y].length;
300
-
301
- if( dataLength > 0 ){
302
-
303
- var placeLoc = Yucho.rectangleArrData[x][y];
259
+ console.log(Yucho.jsonData.jsonDataList);
260
+
304
-
261
+ Yucho.jsonData.jsonDataList.forEach(function (place) {
262
+
305
- var latlng = new google.maps.LatLng(placeLoc.lat,placeLoc.lng);
263
+ var latlng = new google.maps.LatLng(place.lat,place.lan);
306
264
 
307
265
  var marker = new google.maps.Marker({
308
266
 
@@ -312,13 +270,11 @@
312
270
 
313
271
  flat: true,
314
272
 
315
- content: '<div class="marker">'+dataLength+'件</div>'
316
-
317
273
  });
318
274
 
319
275
  Yucho.markerArr.push(marker);
320
276
 
321
- }
277
+ });
322
278
 
323
279
  };
324
280
 
@@ -335,3 +291,13 @@
335
291
  window.onload = Yucho.initMap;
336
292
 
337
293
  ```
294
+
295
+
296
+
297
+ ######エラー
298
+
299
+ ```エラー
300
+
301
+ Uncaught TypeError: Cannot read property 'getNorthEast' of undefined
302
+
303
+ ```