Leaflet.js：未捕获的错误：无效的 LatLng 对象：（NaN，NaN）答案

【问题标题】：leaflet.js: Uncaught Error: Invalid LatLng object: (NaN, NaN)Leaflet.js：未捕获的错误：无效的 LatLng 对象：（NaN，NaN）
【发布时间】：2017-11-15 22:05:29
【问题描述】：

我有一个包含两个坐标的 json 文件

"_id" : ObjectId("59407457838b932e0677999e"),
"type" : "MultiPoint",
"name" : "points",
"coordinates" : [
        [
                -73.958,
                40.8003
        ],
        [
                -73.9814,
                40.7681
        ]
]

我正在使用 Leaflet 库使用节点 js 和 mongo db 在 Google 地图中标记坐标。

我的 map.pug 文件是

extends layout.pug

block content
    #map
    script(type='text/javascript').
        var map = L.map('map').setView([#{lat},#{lng}], 14);
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        $.getJSON('/maplayers',function(result){
            $.each(result, function(i, mlayer){
                $.getJSON('/mapjson/' + mlayer.name, function(data) { addLayer(data, mlayer.name ) });
            });
        });

        function addLayer(layer, name) {
            var leaf_layer;
            if (layer.type == "MultiPoint") {
                leaf_layer = L.geoJson(layer, { pointToLayer: function (feature, latlng) {return L.circleMarker(latlng, layer.style); }})
                leaf_layer.bindPopup(layer.type);
            } 
            leaf_layer.addTo(map);

            $('#' + name).click(function(e) {

                if (map.hasLayer(leaf_layer)) {
                    map.removeLayer(leaf_layer);
                } else {
                    map.addLayer(leaf_layer);
                }
            });
        }

这些值与浏览器中的标记一起显示在地图上 (http://localhost:3000/map)。

但是，如果我像下面这样只用一个坐标更改我的 Json 文件，它就不会显示出来。

"_id" : ObjectId("594061ea838b932e0677999d"),
        "type" : "MultiPoint",
        "name" : "points",
        "coordinates" : [
                -73.958,
                40.8003
        ]

浏览器控制台中的错误是

leaflet.js:6 Uncaught Error: Invalid LatLng object: (NaN, NaN)

谁能解释一下如何解决这个问题并在地图上显示一个坐标？

【问题讨论】：

因为您删除了周围的括号。应该是 "coordinates" : [ [ -73.958, 40.8003 ] ] 对 "MultiPoint" 有效
谢谢尼尔。我将尝试添加周围的括号并再次检查。

标签： javascript jquery node.js mongodb leaflet

【解决方案1】：

GeoJSONMultiPoint 几何类型需要 coordinates 作为嵌套位置的数组。每个“位置”都是一个包含 2 个值的数组，即 [longitude, latitude]。（海拔可能是第三）

如果您只提供一个位置，而不是嵌套在父数组中，则您的几何图形不再符合 GeoJSON。

相反，您还应该将几何类型更改为 Point，这确实将 coordinates 视为单个 lng-lat 位置。

【讨论】：