Question

我正在使用.loadGeoJson将geojson数据加载到Google Maps API实例中。我之前使用过这个，但这次它没有加载任何数据，我不知道为什么。

我之前使用的代码是：

var localLayer = new google.maps.Data();
localLayer.loadGeoJson('JSON/local.geojson');
localLayer.setMap(map);

我目前的代码如下：

JavaScript的：

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 39.154743,
            lng: -77.240515
        },
        zoom: 10
    });
};
$(document).ready(function() {
    initMap();
    var localLayer = new google.maps.Data();
    localLayer.loadGeoJson('json/Schools.geojson');
    localLayer.setMap(map);
});

HTML：

<body>
    <div id="page">
        <div id="content">
            <h1>Title</h1>
            <div id="map"></div>
        </div>
    </div>
</body>

CSS：

body {
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
}

#map {
    height: 400px;
    width: 400px;
    margin: 0 auto;
    border: 1px solid black;
    box-shadow: 3px 3px 10px 3px black;
}

文件路径为json/Schools.geojson。

我做错了什么？

Answer 1

显然Schools.geojson包含无效坐标，例如：[1263179.3749040514, 541288.18736040592]。你可以利用 Data Layer API验证Geo JSON数据。一旦提供了错误的lat / lng值，Data Layer API将为90对象的纬度属性返回google.maps.LatLng值：

添加以下行：

schoolLayer.addListener('addfeature', validateData);

其中

function validateData(o) {

   var validateCoordinates = function (items) {
        var validAll = items.every(function (item) {
            var latLngs = item.getArray();
            valid = latLngs.every(function (latLng) {
                return isValidLatLng(latLng);
            });
            return valid;
        });
        return validAll;
    };

    var f = o.feature;
    var geometry = f.getGeometry();
    if (geometry.getType() == "MultiPolygon") {
        var allCoords = geometry.getArray();
        allCoords.forEach(function(coords) {
            if (!validateCoordinates(coords.getArray())) {
                document.getElementById('output').innerHTML += 'Geo JSON contains invalid lat/lng'; 
            }
        });
    } else {
        var coords = geometry.getArray();
        if (!validateCoordinates(coords)) {
             document.getElementById('output').innerHTML += 'Geo JSON contains invalid lat/lng'; 
        }
    }
}



function isValidLatLng(latLng) {
    return latLng.lat() != 90;
}

Here is a working example演示了如何验证Geo JSON。

loadGeoJson无法正常工作

1 个答案: