リーフレットはgeojsonFeaturesでポイントをマークしていませんか？

私はリーフレットAPIを使い始めています。GeoJsonデータを使用して、幾何学的な点を顧客マップに追加したいと考えています。現在、私はここにgeojsonFeatureタイプのものを使用しましたhttp://leafletjs.com/examples/quick-start.html リーフレットはgeojsonFeaturesでポイントをマークしていませんか？

しかし、このような手順を実行して機能を追加すると、その機能は表示されません。以下は私のHTMLページとコードです。

<html><head> 
    <title>Leaflet Quick Start Guide Example</title> 
    <meta charset="utf-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"> 
</head> 
<body class=""> 
    <div id="mapid" style="width: 600px; height: 400px; position: relative;" class="leaflet-container leaflet-fade-anim" tabindex="0"></div> 

    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 
    <script src="https://raw.github.com/calvinmetcalf/leaflet-ajax/master/dist/leaflet.ajax.min.js"></script> 
    <script> 

     var mymap = L.map('mapid').setView([51.505, -0.09], 13); 

     L.tileLayer('https://api.mapbox.com/styles/v1/edsonbarboza/ciqb82pfe000dc1nliqy8sljp/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZWRzb25iYXJib3phIiwiYSI6ImNpbTJjMWRuczA5NGx1MGtzbmN6c3NjOHMifQ.FvAMXzmnQ0TIJDDsV6rXAw', { 
      maxZoom: 18, 
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
       '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
       'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
      id: 'mapbox.satelity' 
     }).addTo(mymap); 


     var myStyle = { 
     "color": "#ff7800", 
     "weight": 5, 
     "opacity": 0.65 
     }; 


     //L.marker([51.51, -0.09]).addTo(mymap) 

     var geojsonFeature = { 
      "type": "Feature", 
      "properties": { 
       "name": "Coors Field", 
       "amenity": "Baseball Stadium", 
       "popupContent": "This is where the Rockies play!" 
      }, 
      "geometry": { 
       "type": "Point", 
       "coordinates": [51.51, -0.09] 
      } 
     }; 

     var myLayer = L.geoJson().addTo(mymap); 
     myLayer.addData(geojsonFeature); 

     <!-- var geojsonLayer = new L.GeoJSON.AJAX("geojson_data.json", {style:myStyle}); --> 

     <!-- geojsonLayer.addTo(mymap); --> 

     var popup = L.popup(); 

     function onMapClick(e) { 
      popup 
       .setLatLng(e.latlng) 
       .setContent("You clicked the map at " + e.latlng.toString()) 
       .openOn(mymap); 
     } 

     mymap.on('click', onMapClick); 

    </script>

ありがとうございました。

出典

2016-07-07 Edson Barbosa

ジオメトリの座標を反転する必要があります。ここで

var geojsonFeature = { 
     "type": "Feature", 
     "properties": { 
      "name": "Coors Field", 
      "amenity": "Baseball Stadium", 
      "popupContent": "This is where the Rockies play!" 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [-0.09, 51.51] 
     } 
    };

は、これは、それが動作しないhere

出典

2016-07-07 15:02:43 YaFred

感謝を指定された補正

であなたのsampleです。しかし、リーフレット - ajaxの収集json FeatureCollectionは動作しません –

[リンク]（http://jsfiddle.net/ve2huzxw/197/）と私のサンプルで[リンク]（http://plnkr.coで指定されている例に従ってください/編集/ Y90ic8unce0cZOwzrG2w？p = info） –

申し訳ありませんが、わかりません。私は何の問題も見ません。これを見てhttp://plnkr.co/edit/RtZL9YmlsTdbv3qJpW8e?p=preview元のスニペットにサンプルデータを追加したところ – YaFred

リーフレットはgeojsonFeaturesでポイントをマークしていませんか？

答えて

関連する問題