teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問Leafletのマーカーをポップアップで表示したい

編集履歴

質問編集履歴

3

再度、誤りがある箇所を修正

2019/04/18 13:18

投稿

southern_flavor
southern_flavor

スコア70

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,6 @@
1
1
  ### やりたいこと
2
2
 
3
- 例えばaタグがあって、そのaタグをクリックすると該当のLeaflet内のマーカーが反応し、ポップアップで出るようにしたいです。
3
+ いくつかのa要素があって、そのa要素をクリックすると該当のLeaflet内のマーカーが反応し、ポップアップで出るようにしたいです。
4
-
5
-
6
4
 
7
5
 
8
6
 
@@ -10,10 +8,6 @@
10
8
 
11
9
  外部のgeoJsonを読み込んでそこに緯度経度、popup、マーカー画像の名前等を保存しています。
12
10
 
13
- デフォルトの地図表示は、wordpressのカスタムフィールドに保存した緯度経度、ズームレベルの値をもってきています。
14
-
15
- 下記ソースコードの東京、京都、大阪はgeojsonにもそれぞれ値（緯度経度、マーカー画像名、popup名前）が保存されています。
16
-
17
11
 
18
12
 
19
13
  ###現状のソースコード

2

ソースコードに誤りがある箇所を修正

2019/04/18 13:18

投稿

southern_flavor
southern_flavor

スコア70

test CHANGED
File without changes
test CHANGED
@@ -20,9 +20,9 @@
20
20
 
21
21
  ```html
22
22
 
23
- <a href="#" id="hoge1">東京</button>
23
+ <a href="#" id="hoge">東京</a>
24
-
24
+
25
- <a href="#" id="hoge2">京都</button>
25
+ <a href="#" id="fuga">京都</a>
26
26
 
27
27
  ```
28
28
 
@@ -92,7 +92,7 @@
92
92
 
93
93
  var iconChange = L.icon({
94
94
 
95
- iconUrl: '<?php echo ./geojson/'+ feature.properties.iconName +'.png',
95
+ iconUrl: './geojson/'+ feature.properties.iconName +'.png',
96
96
 
97
97
  iconRetinaUrl: './geojson/'+ feature.properties.iconName2x +'.png',
98
98
 
@@ -180,7 +180,7 @@
180
180
 
181
181
 
182
182
 
183
- $("#hoge1,#hoge2").click(function(){
183
+ $("a").click(function(){
184
184
 
185
185
  markerFunction($(this)[0].id);
186
186
 
@@ -188,10 +188,6 @@
188
188
 
189
189
 
190
190
 
191
- map.setView([<?php echo $lat; ?>,<?php echo $lon; ?>], <?php echo $zoom_lavel; ?>);
192
-
193
-
194
-
195
191
  map.addControl(new L.Control.Fullscreen({
196
192
 
197
193
  title: {
@@ -230,6 +226,8 @@
230
226
 
231
227
  "type": "Feature",
232
228
 
229
+ "title": "hoge",
230
+
233
231
  "properties": {
234
232
 
235
233
  "name": "あああ",
@@ -262,6 +260,8 @@
262
260
 
263
261
  "type": "Feature",
264
262
 
263
+ "title": "fuga",
264
+
265
265
  "properties": {
266
266
 
267
267
  "name": "いいい",
@@ -290,7 +290,9 @@
290
290
 
291
291
  }
292
292
 
293
- ・・・・
293
+ ]
294
+
295
+ }
294
296
 
295
297
  ```
296
298
 

1

ソースコードや質問文を変えました。

2019/04/18 13:16

投稿

southern_flavor
southern_flavor

スコア70

test CHANGED
@@ -1 +1 @@
1
- 要素をクリックした時でもLeaflet地図内のマーカーをポップアップの選択状態にしたい
1
+ Leafletのマーカーをポップアップで表示したい
test CHANGED
@@ -1,41 +1,13 @@
1
1
  ### やりたいこと
2
2
 
3
-
4
-
5
- イメージとしてはこんな感じです。
6
-
7
- https://river.longseller.org/
8
-
9
- 上記のサイトでは地図内にある河川のラインをクリックすると下に
10
-
11
- 「川の名前」とポップアップで「水系、区分」
12
-
13
- が出てきて選択状態になります。
14
-
15
- 下に出てきた河川名をクリックしてもポップアップで選択状態になります。
16
-
17
-
18
-
19
- 私が具体的にやりたいことは、
20
-
21
- 例えば河川の名前は最初から表示され、クリックすると該当の河川へポップアップで選択状態にし、地図内の該当箇所をクリックしてもポップアップの選択状態にしたいです。
3
+ 例えばaタグがあって、そのaタグをクリックすると該当のLeaflet内のマーカーが反応し、ポップアップで出るようにしたいです。
22
-
23
- 上記のサイトとは仕様が違いますが、<a>タグもしくは<button>タグにonclick属性を付与して、そこに緯度経度の値を入れて、地図内をクリックしても要素をクリックしても選択状態（openPopup()）になるようにしたいです。
4
+
24
-
25
- 他に効率のよいやり方があればご教授いただきたいです。
5
+
26
6
 
27
7
 
28
8
 
29
9
  ###現在、Leafletの仕様
30
10
 
31
- 'https://unpkg.com/leaflet@1.4.0/dist/leaflet.js',
32
-
33
- 'https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js',
34
-
35
- 'https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js',
36
-
37
- を使い、クラスターと地図のフルスクリーン機能を入れています。
38
-
39
11
  外部のgeoJsonを読み込んでそこに緯度経度、popup、マーカー画像の名前等を保存しています。
40
12
 
41
13
  デフォルトの地図表示は、wordpressのカスタムフィールドに保存した緯度経度、ズームレベルの値をもってきています。
@@ -48,11 +20,9 @@
48
20
 
49
21
  ```html
50
22
 
51
- <button class="hoge1" onclick="L.marker([35.6679191,139.4606805]).openPopup();">東京</button>
23
+ <a href="#" id="hoge1">東京</button>
52
-
24
+
53
- <button class="hoge2" onclick="L.marker([35.0978739,135.4386888]).openPopup();">京都</button>
25
+ <a href="#" id="hoge2">京都</button>
54
-
55
- <button class="hoge3" onclick="L.marker([34.6775781,135.4156461]).openPopup();">大阪</button>
56
26
 
57
27
  ```
58
28
 
@@ -60,7 +30,11 @@
60
30
 
61
31
  ```javascript
62
32
 
33
+
34
+
63
- <?php $lat = get_field('lat'); $lon = get_field('lon'); $zoom_lavel = get_field('zoom_lavel'); ?>
35
+ $('#map').each(function () {
36
+
37
+
64
38
 
65
39
  var tiles = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
66
40
 
@@ -90,9 +64,15 @@
90
64
 
91
65
  });
92
66
 
67
+
68
+
69
+
70
+
71
+
72
+
93
73
  httpObj = new XMLHttpRequest();
94
74
 
95
- httpObj.open("GET", "./geojson/location.geojson", true);
75
+ httpObj.open("GET", "./geojson/hoge.geojson", true);
96
76
 
97
77
  httpObj.addEventListener('load', function(res){
98
78
 
@@ -112,7 +92,7 @@
112
92
 
113
93
  var iconChange = L.icon({
114
94
 
115
- iconUrl: './geojson/'+ feature.properties.iconName +'.png',
95
+ iconUrl: '<?php echo ./geojson/'+ feature.properties.iconName +'.png',
116
96
 
117
97
  iconRetinaUrl: './geojson/'+ feature.properties.iconName2x +'.png',
118
98
 
@@ -122,14 +102,30 @@
122
102
 
123
103
  var iconDefalut = L.icon({
124
104
 
125
- iconUrl: '<?php echo get_stylesheet_directory_uri(); ?>/geojson/red.png',
105
+ iconUrl: './geojson/marker-icon-blue.png',
126
-
106
+
127
- iconRetinaUrl: '<?php echo get_stylesheet_directory_uri(); ?>/geojson/red-2x.png',
107
+ iconRetinaUrl: './geojson/marker-icon-blue-2x.png',
128
108
 
129
109
  iconSize: [25, 41]
130
110
 
111
+ //popupAnchor: [0, 20],
112
+
131
113
  });
132
114
 
115
+
116
+
117
+
118
+
119
+ var m = L.marker(latlng, {icon: iconChange});
120
+
121
+ data.push(m);
122
+
123
+ return m;
124
+
125
+
126
+
127
+
128
+
133
129
  if(feature.properties.iconName){
134
130
 
135
131
  return L.marker(latlng, {icon: iconChange});
@@ -140,8 +136,6 @@
140
136
 
141
137
  }
142
138
 
143
- return L.polyline(latlng);
144
-
145
139
  },
146
140
 
147
141
  style: function (feature) {
@@ -166,6 +160,34 @@
166
160
 
167
161
  map.fitBounds(markers.getBounds());
168
162
 
163
+
164
+
165
+ function markerFunction(id){
166
+
167
+ for (var i in data){
168
+
169
+ var markerID = data[i].options.popup;
170
+
171
+ if (markerID == id){
172
+
173
+ data[i].openPopup();
174
+
175
+ }
176
+
177
+ }
178
+
179
+ }
180
+
181
+
182
+
183
+ $("#hoge1,#hoge2").click(function(){
184
+
185
+ markerFunction($(this)[0].id);
186
+
187
+ });
188
+
189
+
190
+
169
191
  map.setView([<?php echo $lat; ?>,<?php echo $lon; ?>], <?php echo $zoom_lavel; ?>);
170
192
 
171
193
 
@@ -182,14 +204,110 @@
182
204
 
183
205
  }));
184
206
 
207
+
208
+
185
209
  });
186
210
 
211
+
212
+
187
213
  httpObj.send(null);
188
214
 
215
+ });
216
+
189
217
  ```
190
218
 
191
219
 
192
220
 
221
+ ```geojson
222
+
223
+ {
224
+
225
+ "type": "FeatureCollection",
226
+
227
+ "features": [
228
+
229
+ {
230
+
231
+ "type": "Feature",
232
+
233
+ "properties": {
234
+
235
+ "name": "あああ",
236
+
237
+ "popup": "<a href='' target='_blank'>hoge<br>fuga</a>",
238
+
239
+ "iconName": "marker-icon",
240
+
241
+ "iconName2x": "marker-icon-2x"
242
+
243
+ },
244
+
245
+ "geometry": {
246
+
247
+ "type": "Point",
248
+
249
+ "coordinates": [
250
+
251
+ 138.922909,
252
+
253
+ 37.135942
254
+
255
+ ]
256
+
257
+ }
258
+
259
+ },
260
+
261
+ {
262
+
263
+ "type": "Feature",
264
+
265
+ "properties": {
266
+
267
+ "name": "いいい",
268
+
269
+ "popup": "<a href='' target='_blank'>hoge<br>fuga</a>",
270
+
271
+ "iconName": "marker-icon",
272
+
273
+ "iconName2x": "marker-icon-2x"
274
+
275
+ },
276
+
277
+ "geometry": {
278
+
279
+ "type": "Point",
280
+
281
+ "coordinates": [
282
+
283
+ 138.914036,
284
+
285
+ 37.114555
286
+
287
+ ]
288
+
289
+ }
290
+
291
+ }
292
+
293
+ ・・・・
294
+
295
+ ```
296
+
297
+
298
+
193
299
  ###起きているエラー
194
300
 
195
- 現状のbutton要素をクリックしても特にエラーが起きているわけでもなく、何も反応しない状態です。
301
+ 現在は、aタグをクリックしても反応しない状態です。
302
+
303
+ コンソールエラーは、こんな感じででました。
304
+
305
+ Uncaught TypeError: Cannot read property 'popup' of undefined
306
+
307
+ at markerFunction ((index):974)
308
+
309
+ at HTMLAnchorElement.<anonymous> ((index):982)
310
+
311
+ at HTMLAnchorElement.dispatch (jquery-2.2.4.min.js:3)
312
+
313
+ at HTMLAnchorElement.r.handle (jquery-2.2.4.min.js:3)