使用 openstreetmap 的 JSON 在 Google 地图上创建多边形 InvalidValueError: 不是数组

问题描述

我想在谷歌地图中显示省份之间的边界。论坛里说只能调用openstreetmap获取坐标，然后在谷歌地图中创建多边形。代码失败，不显示多边形并给出“InvalidValueError: not an Array”。是因为promise调用吗？还是因为我没有很好地生成数组？

    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'),{
      // TNF
          zoom: 10,center: {lat: 28.4125202,lng: -16.5566306},mapTypeId: 'roadmap'
    });
            
            
    var promise = $.getJSON('https://nominatim.openstreetmap.org/details.PHP?place_id=256937694&polygon_geojson=1&format=json'); 

    promise.then(function(data){
        var cachedGeoJson = data; //save the geojson in case we want to update its values
        
        console.log(JSON.stringify(cachedGeoJson));  //OUTPUT-1
        console.log(cachedGeoJson.geometry.coordinates); // OUTPUT-2

        
        for (var i = 0; i < cachedGeoJson.geometry.coordinates.length; i++) {
                var coord = cachedGeoJson.geometry.coordinates[i];
                coord_poligon.push(coord); 
        };
        
        coord_poligon_JSON = JSON.stringify(coord_poligon); 
        console.log(coord_poligon_JSON );  // OUTPUT-3: 

            
        var geoObject = cachedGeoJson.geometry.coordinates;
        var features = [];
        features = geoObject;
        
        var geoJson = {
            "type": "FeatureCollection","features": [{
              "type": "Feature","geometry": {
                "type": "polygon","coordinates":features,},"properties": {}
            }]
        };

        console.log(JSON.stringify(geoJson)); // OUTPUT-4

        
    }); // end promise. 

    // Construct the polygon.
    triangleCoords = geoJson;  

    var bermudaTriangle = new google.maps.polygon({ 
      paths: triangleCoords,strokeColor: '#FF0000',strokeOpacity: 0.8,strokeWeight: 3,fillColor: '#ea0e0e',// red color  
      fillOpacity: 0.20
    });
    bermudaTriangle.setMap(map);

    //OUTPUT-1:
    //{"place_id":256937694,...
    //{"type":"Point","coordinates":[-16.5532956,28.4159024]},"geometry":{"type":"polygon","coordinates":[[[-16.5705013,28.4080941],[-16.5703805,28.4076554],...

    // OUTPUT-2:    
                //0: (2) [-16.5705013,28.4080941]
                //1: (2) [-16.5703805,28.4076554]
                //2: (2) [-16.5701851,28.4064929]

    // OUTPUT-3: [[[-16.5705013,[-16.5701851,28.4064929],...

    // OUTPUT-4: {"type":"FeatureCollection","features":[{"type":"Feature",

解决方法

最后我使用了 Polygon 数组，而不是 geoJson。 关于：openstreetmap return (lng,lat)。这是 Google Maps API 创建 POLYGON 所需的相反顺序，使用它 (lat,lng) 所以：

1-STEP：您必须更改坐标对顺序，即创建一个带有坐标对 (lat,lng) 的新数组：

'''

    var promise = $.getJSON('https://nominatim.openstreetmap.org/details.php?place_id=256937694&polygon_geojson=1&format=json'); 

    promise.then(function(data){
    
        var cachedGeoJson = data; 
                            
        for (var i = 0; i < cachedGeoJson.geometry.coordinates.length; i++) {
                    
            var lnglat = cachedGeoJson.geometry.coordinates[i];
            for(var j = 0; j < lnglat.length; j++)
            {
                
            var longitud = lnglat[j][0]; // first value on openstreetmap is lng
            var latitud = lnglat[j][1]; // second value is lat
            coord_poligon.push(new google.maps.LatLng(parseFloat(latitud),parseFloat(longitud )));
            
                
            }
        };

''' 2-STEP：将此新数组 (lat,lng) 分配给将创建多边形的数组：

'''

        var triangleCoords = [coord_poligon]; //array inside brackets. IMPORTANT!
                        
        var bermudaTriangle = new google.maps.Polygon({ 
          paths: triangleCoords,// array 
          strokeColor: '#0a6df0',// azul oscuro
          strokeOpacity: 0.8,strokeWeight: 3,fillColor: '#48cef7',// azul claro 
          fillOpacity: 0.20
        });
        bermudaTriangle.setMap(map);

    
        infoWindow = new google.maps.InfoWindow;


    }); // end promise. 

'''

完整代码：

'''

var coord_poligon = [];         
var triangleCoords = [];
    
    
function initMap() { 
map = new google.maps.Map(document.getElementById('map'),{
      zoom: 12,center: {lat: 28.4125202,lng: -16.5566306},// TNF
      mapTypeId: 'roadmap'
});
    
    var promise = $.getJSON('https://nominatim.openstreetmap.org/details.php?place_id=256937694&polygon_geojson=1&format=json'); 

    promise.then(function(data){
    
        var cachedGeoJson = data; 
                
        for (var i = 0; i < cachedGeoJson.geometry.coordinates.length; i++) {
                    
            var lnglat = cachedGeoJson.geometry.coordinates[i];
            for(var j = 0; j < lnglat.length; j++)
            {
                
            var longitud = lnglat[j][0]; // first value on opentreet is  lng
            var latitud = lnglat[j][1]; // second value is lat
            coord_poligon.push(new google.maps.LatLng(parseFloat(latitud),parseFloat(longitud )));
            
                
            }
        };
        
        var triangleCoords = [coord_poligon]; // array dentro de corchetes . IMPORTANT!

        
        var bermudaTriangle = new google.maps.Polygon({ 
          paths: triangleCoords,// dark blue
          strokeOpacity: 0.8,// blue 
          fillOpacity: 0.20
        });
        bermudaTriangle.setMap(map);


        infoWindow = new google.maps.InfoWindow;


    }); // end promise. 
    
} // end initMap()
    

'''