loadGeoJson 不工作

Question

我正在使用 .loadGeoJson 将 geojson 数据加载到 Google 地图 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 to validate Geo JSON data. Once incorrect lat/lng values has been provided, Data Layer API returns 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 不工作

loadGeoJson not working

javascript

google-maps

geojson

google-maps-api-3