Fatal编程技术网
  • javascript/
  • Javascript 从geojson数据在传单地图上绘制标记

Javascript 从geojson数据在传单地图上绘制标记

javascript json leaflet

Javascript 从geojson数据在传单地图上绘制标记,javascript,json,leaflet,geojson,Javascript,Json,Leaflet,Geojson,如何将geoJson数据（超过2000个坐标）导入传单地图？ 这是geo-json的简短示例 { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ 44.8242557024,20.4048512901 ] }, "properties": {

如何将geoJson数据（超过2000个坐标）导入传单地图？ 这是geo-json的简短示例

{
   "type": "FeatureCollection",
   "features": [
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 44.8242557024,20.4048512901 ]
    },
    "properties": {
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ 44.8242557024,20.4048512901 ]
    },
    "properties": {
    }
  },...]
我尝试过的代码：

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
  <!--[if lte IE 8]>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" />
  <![endif]-->
  <style type="text/css">
    body {
      padding: 0;
      margin: 0;
    }

    html, body, #cmap {
      height: 100%;
    }

  </style>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
  <div id="cmap"></div>
  <script>
  var cupcakeTiles = L.tileLayer('https://api.mapbox.com/v4/mapbox.emerald/page.html?access_token=cj5h2mqa63sc92srx3bu62e2j', {
    maxZoom: 18
  });

  $.getJSON("convertcsv.geojson", function(data) {
    var geojson = L.geoJson(data, {
      onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.name);cj5h2mqa63sc92srx3bu62e2j
      }
    });

var map = L.map('map', {
    center: [44, 20],
    zoom: 7
});

L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {       
    id: 'examples.map-20v6611k'
}).addTo(map);

new L.GeoJSON(meta1nJson).addTo(map);
  });
  </script>
</body>
</html>


身体{
填充：0；
保证金：0；
}
html，body，#cmap{
身高：100%；
}
var cupcakeTiles=L.tileLayer（'https://api.mapbox.com/v4/mapbox.emerald/page.html?access_token=cj5h2mqa63sc92srx3bu62e2j', {
最大缩放：18
});
$.getJSON（“convertcsv.geojson”，函数（数据）{
var geojson=L.geojson（数据{
onEachFeature：功能（功能，图层）{
layer.bindPopup（feature.properties.name）；cj5h2mqa63sc92srx3bu62e2j
}
});
var map=L.map（'map'{
中间：[44,20]，
缩放：7
});
L.tileLayer（'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png'，{
id:'examples.map-20v6611k'
}).addTo（地图）；
新的L.GeoJSON（meta1nJson）.addTo（map）；
});
但是什么也没发生，只是一个灰色的背景。我不确定错误在哪里（可能不止一个），但导入geojson数据和映射令牌可能有错误。
这方面我完全是新手。先谢谢你

代码中似乎有很多问题。首先，html中不存在id为“map”的元素，因此无法放置贴图层。您必须在下面的代码中添加“cmap”作为id

var map = L.map('cmap', {
   center: [44, 20],
   zoom: 7
});
此外，meta1nJson似乎没有在您的代码中定义，因此下面的代码将不起作用

new L.GeoJSON(meta1nJson).addTo(map);
图层铜宝石似乎已定义，但从未添加到地图中。在下面的代码中还有一个杂散的字符串，应该删除它

 $.getJSON("convertcsv.geojson", function(data) {
var geojson = L.geoJson(data, {
  onEachFeature: function (feature, layer) {
    layer.bindPopup(feature.properties.name); //cj5h2mqa63sc92srx3bu62e2j
  }
});