javascript 如何从带有许多点的 geoJson 在地图上添加标记（传单）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23789867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add Markers on Map from geoJson with many points (Leaflet)
提问by Victor Laerte
I'm trying to add some markers on my map using a geoJson with Points, I'm following the leaflet documentationbut it still saying:
我正在尝试使用带有点的 geoJson 在我的地图上添加一些标记，我正在关注传单文档，但它仍然说：
Error: Invalid GeoJSON object.
throw new Error('Invalid GeoJSON object.');
错误：无效的 GeoJSON 对象。
throw new Error('Invalid GeoJSON object.');
My 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": "Petrolandia",
"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": "Petrolandia / 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"
}
}
]
};
and how do I try to render markers:
以及如何尝试渲染标记：
var layerComunidades1N = L.geoJson(meta1nJson).addTo(map);
I cannot find what I'm doing wrong, according to leaflet documentation if I don't pass the option pointToLayer it is supposed to render default markers, am I wrong?
根据传单文档，我找不到我做错了什么，如果我不通过选项 pointToLayer 它应该呈现默认标记，我错了吗？
采纳答案by sfletche
I don't see any problem with your geojson. I copied your geojson into geojson.ioand it works fine.
我看不出你的 geojson 有任何问题。我将您的 geojson 复制到geojson.io并且它工作正常。
It does look like you're calling GeoJSONincorrectly (your example above shows a call to geoJson), however that doesn't explain the error you're getting...
看起来您的调用确实GeoJSON不正确（上面的示例显示了对 的调用geoJson），但这并不能解释您遇到的错误...
Regardless, here is a working jsfiddle that visualizes your geojson as markers on a leaflet map.
无论如何，这是一个有效的 jsfiddle，可将您的 geojson 可视化为传单地图上的标记。
And here is the relevant code (with a base layer for good measure):
这是相关的代码（带有一个基础层可以很好地衡量）：
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);
Hopefully, that helps.
希望这会有所帮助。
回答by Vinicius Santana
Try this:
试试这个：
/* Instantiate an icon. You can have multiple icons also*/
/* 实例化一个图标。你也可以有多个图标*/
var ComunidadeIcon = L.icon({
iconUrl: 'http://iambrony.dget.cc/mlp/gif/angel_stand_right.gif',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});
/* List objects features from FeatureCollection from GJson*/
/* 列出来自 GJson 的 FeatureCollection 的对象特征 */
var layerComunidades1N = L.geoJson(meta1nJson, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: ComunidadeIcon});
}, onEachFeature: onEachFeature
}).addTo(map);
/* This function can hold many things. I'm using to show a popup*/
/* 这个函数可以容纳很多东西。我用来显示一个弹出窗口*/
function onEachFeature(feature, layer) {
var popupContent = "<p>DaTerra Web</p>";
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}
