回答編集履歴

修正

2019/04/09 08:12

投稿

annderber

スコア98

test CHANGED Viewed

@@ -1,4 +1,4 @@
-コード量が長くなるので、こちらに記述いたします。
+再度修正しました。
@@ -38,285 +38,51 @@
     <div id="map" style="width: 600px;height: 500px"></div>
     <script>
-            var tiles = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+        var tiles = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-                maxZoom: 14,
+            maxZoom: 14,
-                attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
+            attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
-            });
+        });
-            var map = L.map('map')
+        var map = L.map('map')
-                    .addLayer(tiles);
+                .addLayer(tiles);
-            var markers = L.markerClusterGroup({
+        var markers = L.markerClusterGroup({
-                showCoverageOnHover: true,
+            showCoverageOnHover: true,
-                spiderfyOnMaxZoom: false,
+            spiderfyOnMaxZoom: false,
-                removeOutsideVisibleBounds: true,
+            removeOutsideVisibleBounds: true,
-                disableClusteringAtZoom: 8
+            disableClusteringAtZoom: 8
-                }
+            }
-                );
+        );
-        const data = {
-    "type": "FeatureCollection",
-    "features": [
-        {
-        "type": "Feature",
-        "properties": {
-            "marker-color": "#7e7e7e",
-            "marker-size": "medium",
-            "marker-symbol": "",
-            "popup": "あああああああ"
-        },
-        "geometry": {
-            "type": "Point",
-            "coordinates": [
-            138.78552,
-            37.663027
-            ]
-        }
-        },
-        {
-        "type": "Feature",
-        "properties": {},
-        "geometry": {
-            "type": "Point",
-            "coordinates": [
-            138.802069,
-            37.653211
-            ]
-        }
-        },
-        {
-        "type": "Feature",
-        "properties": {},
-        "geometry": {
-            "type": "Point",
-            "coordinates": [
-            138.819922,
-            37.64502
-            ]
-        }
-        },
-        {
-        "type": "Feature",
-        "properties": {},
-        "geometry": {
-            "type": "Point",
-            "coordinates": [
-            138.826511,
-            37.636968
-            ]
-        }
-        },
-        {
-        "type": "Feature",
-        "properties": {},
-        "geometry": {
-            "type": "Point",
-            "coordinates": [
-            138.826649,
-            37.626823
-            ]
-        }
-        },
-        {
-        "type": "Feature",
-        "properties": {},
-        "geometry": {
-            "type": "Point",
-            "coordinates": [
-            138.834801,
-            37.626811
-            ]
-        }
-        },
-        {
-        "type": "Feature",
-        "properties": {},
-        "geometry": {
-            "type": "Point",
-            "coordinates": [
-            138.83981,
-            37.61816
-            ]
-        }
-        },
-        {
-        "type": "Feature",
-        "properties": {},
-        "geometry": {
-            "type": "Point",
-            "coordinates": [
-            138.832363,
-            37.6159
-            ]
-        }
-        },
-        {
-        "type": "Feature",
-        "properties": {
-            "stroke": "#d10004",
-            "stroke-width": 10,
-            "stroke-opacity": 1
-        },
-        "geometry": {
-            "type": "LineString",
-            "coordinates": [
-            [
-                138.77723693847656,
-                37.66670097960347
-            ],
-            [
-                138.78976821899414,
-                37.662488471331706
-            ]
-            ]
-        }
-        }
-    ]
-    };
-    // httpObj = new XMLHttpRequest();
-    // httpObj.open("get", "hoge.geojson", function(data){
-    //     GeoJSON.parse(data);
+        httpObj = new XMLHttpRequest();
+        httpObj.open("GET", "hoge.json", true);
+        httpObj.addEventListener('load', function(res){
+            const data = JSON.parse(res.currentTarget.response);
-        var geoJsonLayer = L.geoJson(data, {
+            var geoJsonLayer = L.geoJson(data, {
                 onEachFeature: function (feature, layer) {
@@ -372,11 +138,11 @@
-    //         httpObj.send(null);
-    // });
+        });
+        httpObj.send(null)
     </script>
@@ -388,10 +154,4 @@
-投稿者様のスクリプトにjsonデータをそのままコピペして、XMLHttpRequestの部分をコメントアウトしています。
+XMLHttpRequestを行った場合での処理で編集し直しました。ファイルのパスは変更してください。
-恐らくこのままコピペすれば表示されると思います。
-なので、取得の部分で躓いているのでは無いかと思いますがいかがでしょうか