如何从geoJson的地图上添加标记点多点（传单）

Question

我正在尝试使用带有点的 geoJson 在我的地图上添加一些标记，我正在关注传单 documentation 但它仍然说：

错误：无效的 GeoJSON 对象。
throw new Error('无效的 GeoJSON 对象。');

我的 GeoJson：

var meta1nJson={
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -38.3613558,
          -8.8044875
        ]
      },
      "properties": {
        "Ordem": "193",
        "Eixo": "Leste",
        "Meta": "1L",
        "Municipio": "Petrolândia",
        "Estado": "PE",
        "Nome da Comunidade": "Agrovila 4"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -38.3445892,
          -8.7940031
        ]
      },
      "properties": {
        "Ordem": "194",
        "Eixo": "Leste",
        "Meta": "1L",
        "Municipio": "Petrolândia / Floresta",
        "Estado": "PE",
        "Nome da Comunidade": "Agrovila 5"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -37.8521847,
          -8.6774657
        ]
      },
      "properties": {
        "Ordem": "195",
        "Eixo": "Leste",
        "Meta": "1L",
        "Municipio": "Inajá/Ibimirim",
        "Estado": "PE",
        "Nome da Comunidade": "Indígena Kambiwá - Baxa da Alexandra"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -37.9229577,
          -8.645232
        ]
      },
      "properties": {
        "Ordem": "196",
        "Eixo": "Leste",
        "Meta": "1L",
        "Municipio": "Inajá",
        "Estado": "PE",
        "Nome da Comunidade": "Indígena Kambiwá -  Barracão"
      }
    }
  ]
};

以及如何尝试渲染标记：

var layerComunidades1N = L.geoJson(meta1nJson).addTo(map);

根据传单文档，如果我没有通过它应该呈现默认标记的选项 pointToLayer，我找不到我做错了什么，我错了吗？

Answer 1

试试这个：

/* 实例化一个图标。你也可以有多个图标*/

var ComunidadeIcon = L.icon({
  iconUrl: 'http://iambrony.dget.cc/mlp/gif/angel_stand_right.gif',
  iconSize: [32, 37],
  iconAnchor: [16, 37],
  popupAnchor: [0, -28]
});

/* 列出来自 GJson 的 FeatureCollection 中的对象特征*/

var layerComunidades1N = L.geoJson(meta1nJson, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {icon: ComunidadeIcon});
  }, onEachFeature: onEachFeature
}).addTo(map);

/* 这个函数可以容纳很多东西。我用来显示一个弹出窗口*/

function onEachFeature(feature, layer) {
  var popupContent = "<p>DaTerra Web</p>";
  if (feature.properties && feature.properties.popupContent) {
    popupContent += feature.properties.popupContent;
  }
  layer.bindPopup(popupContent);
}

Answer 2

我认为您的 geojson 没有任何问题。我将您的 geojson 复制到 geojson.io 和 works fine。

看起来您确实错误地调用了GeoJSON（您上面的示例显示了对geoJson 的调用），但这并不能解释您遇到的错误......

不管怎样，here is a working jsfiddle that visualizes your geojson as markers on a leaflet map。

这里是相关代码（有一个很好的基础层）：

var map = L.map('map', {
    center: [-9, -38],
    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);

希望这会有所帮助。