teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Leaflet クリックしたマーカーの情報を表示したい

編集履歴

質問編集履歴

2

htmlコードを記載しました。

2020/10/10 06:31

投稿

okiron9619
okiron9619

スコア5

test CHANGED
File without changes
test CHANGED
@@ -290,6 +290,76 @@
290
290
 
291
291
  ```
292
292
 
293
+ ```htmlコード（冗長部分があるかもしれません）
294
+
295
+ index.html
296
+
297
+ {% extends "base.html" %}
298
+
299
+ {% load static %}
300
+
301
+ {% block extra_css %}{% endblock %}
302
+
303
+ {% block content %}
304
+
305
+ {% endblock %}
306
+
307
+
308
+
309
+ {% block extra_js %}
310
+
311
+ {% endblock %}
312
+
313
+
314
+
315
+ base.html
316
+
317
+ <!doctype html>
318
+
319
+ {% load static %}
320
+
321
+ <html lang="ja">
322
+
323
+ <head>
324
+
325
+ <meta charset="utf-8">
326
+
327
+ <title>{{ page_title }}</title>
328
+
329
+ {# --- css --- #}
330
+
331
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
332
+
333
+ <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
334
+
335
+ <script src="http://code.jquery.com/jquery-latest.js"></script>
336
+
337
+ <link rel="stylesheet" href="{% static 'rsl_road/css/main.css' %}">
338
+
339
+ {% block extra_css %}{% endblock %}
340
+
341
+ </head>
342
+
343
+ <body>
344
+
345
+ <div class="container">
346
+
347
+ <div id="map"></div>
348
+
349
+ </div>
350
+
351
+ {% block content %}{% endblock %}
352
+
353
+ <script type="text/javascript" src="{% static 'rsl_road/js/canvas.js' %}"></script>
354
+
355
+ <script type="text/javascript" src="{% static 'rsl_road/js/connection.js' %}"></script>
356
+
357
+ </body>
358
+
359
+ </html>
360
+
361
+ ```
362
+
293
363
  ### 試したこと
294
364
 
295
365
  以下のコードを打つことで、クリックではありませんが、idの表示をすることはできました。

1

必要な情報、コードの部分を記載しました

2020/10/10 06:31

投稿

okiron9619
okiron9619

スコア5

test CHANGED
File without changes
test CHANGED
@@ -30,9 +30,85 @@
30
30
 
31
31
  ### 該当のソースコード
32
32
 
33
-
33
+ ```connection.js(ajax通信部分)
34
+
34
-
35
+ if (typeof C === 'undefined'){
36
+
37
+ var C = {};
38
+
39
+ }
40
+
41
+ /**
42
+
43
+ * 全ノードを取得する．
44
+
45
+ */
46
+
47
+ C.getAllNodeList = function() {
48
+
49
+ $.ajax({
50
+
51
+ url: 'get_all_node_list/',
52
+
53
+ method: 'GET',
54
+
55
+ data: {
56
+
57
+ },
58
+
59
+ timeout: 10000,
60
+
61
+ dataType: "json",
62
+
63
+ }).done(function(response) {
64
+
65
+ var nodeListGeojson = response;
66
+
67
+ V.showNodesLayer(nodeListGeojson);
68
+
69
+ }).fail(function(response) {
70
+
71
+ alert('Error!');
72
+
73
+ });
74
+
75
+ }
76
+
77
+ ```
78
+
35
- ```javascriptの一部
79
+ ```canvas.js(マーカー描画部分)
80
+
81
+ if (typeof V === 'undefined'){
82
+
83
+ var V = {};
84
+
85
+ }
86
+
87
+ $('#index_page').ready(function() {
88
+
89
+ C.getAllNodeList();
90
+
91
+ });
92
+
93
+ if (typeof V === 'undefined'){
94
+
95
+ var V = {};
96
+
97
+ }
98
+
99
+ var map = L.map('map').setView([35.016689, 135.674900], 16);
100
+
101
+
102
+
103
+ var tileLayer = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
104
+
105
+ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
106
+
107
+ maxZoom: 19
108
+
109
+ });
110
+
111
+ tileLayer.addTo(map);
36
112
 
37
113
  V.showNodesLayer = function(geojson) {//←'geojson'がpythonから受け取ったデータです。
38
114
 
@@ -86,7 +162,7 @@
86
162
 
87
163
  ```
88
164
 
89
- ```python(geojsonデータの作成部分)の一部
165
+ ```views_models.py(geojsonデータの作成部分)の一部
90
166
 
91
167
  from math import cos, sqrt
92
168
 
@@ -136,6 +212,84 @@
136
212
 
137
213
  ```
138
214
 
215
+ ```views.py
216
+
217
+ from django.shortcuts import render, get_object_or_404
218
+
219
+ from django.views.generic import View
220
+
221
+ from .models import Mareas_Nodes_Latlng
222
+
223
+ from .models import Mareas_Links_Nodes
224
+
225
+ from .view_models import NodeLatlngMapper
226
+
227
+ from .view_models import LinkNode
228
+
229
+ from django.utils.decorators import method_decorator
230
+
231
+ from django.http.response import HttpResponse
232
+
233
+ import json
234
+
235
+ class GetAllNodeListView(View):
236
+
237
+ ##@method_decorator(login_required())
238
+
239
+ def get(self, request, *args, **kwargs):
240
+
241
+ # オブジェクトの取得
242
+
243
+ node_list = Mareas_Nodes_Latlng.objects.all().order_by('node_id')
244
+
245
+ # レスポンスの生成
246
+
247
+ features = []
248
+
249
+ #features = [NodeLatlngMapper(node).as_dict() for node in node_list]
250
+
251
+ for node1, node2 in zip(node_list, node_list[1:]):
252
+
253
+ features.append(NodeLatlngMapper().as_dict(node1, node2))
254
+
255
+ response = {
256
+
257
+ 'features': features,
258
+
259
+ }
260
+
261
+ # レスポンス
262
+
263
+ response_json = json.dumps(response)
264
+
265
+ return HttpResponse(response_json, content_type='application/json')
266
+
267
+ get_all_node_list = GetAllNodeListView.as_view()
268
+
269
+ ```
270
+
271
+ ```ここに言語を入力
272
+
273
+ from django.urls import path
274
+
275
+ from . import views
276
+
277
+
278
+
279
+ app_name = 'rsl_road'
280
+
281
+ urlpatterns = [
282
+
283
+ path('', views.index, name='index'),
284
+
285
+ path('get_all_node_list/', views.get_all_node_list, name='get_all_node_list'),
286
+
287
+ ]
288
+
289
+
290
+
291
+ ```
292
+
139
293
  ### 試したこと
140
294
 
141
295
  以下のコードを打つことで、クリックではありませんが、idの表示をすることはできました。
@@ -148,4 +302,8 @@
148
302
 
149
303
  leaflet1.7.1を使用しています。(このversionではないといけない理由は特にありません)
150
304
 
305
+ python3.8,
306
+
307
+ LinuxMint,にて実行しています
308
+
151
309
  必要な情報が抜けている可能性があります。教えていただけましたら幸いです。