如何使用Google Maps JavaScript API 3分别填充地图图层？

Question

如何分别填充地图图层？ 我设置了一个功能，用于根据存储在GeoJSON中的值来构建多边形样式。 请原谅我对术语的无知。 我是JS的新手，已经在这个问题上呆了整整一周，在网络上搜索并观看教程时间，但是无法回答这个特定问题。

我的运行代码包含以下内容以初始化和创建地图：

    function initialize() {

        var mapOptions = {
            zoom: 16,
            center: new google.maps.LatLng(30.284, -97.7325),
                    mapTypeControlOptions: {
                        mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
                    },
            mapTypeId: MY_MAPTYPE_ID
        };

        // build the map
        map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

        // add colors
        stylePolygons();

        //fetch map layers
        $.getJSON( parkingLot, function( data ) {
            loadGeoJSON(data);
        });


        $.getJSON( building, function( data ) {
            loadGeoJSON(data);
        });
};

稍后在脚本中，我将使用此方法为建筑物着色

// assign colors based on value property of each feature
    function stylePolygons () {
        map.data.setStyle(function(feature) {
            var value = feature.getProperty('value');
            var color = colors[value];
            return {
                fillColor: color,
                strokeWeight: 0.5,
                fillOpacity: 1
            };
        });
    };

如何分别设置其余图层的样式？ 内联代码或简单函数会很好，因为图层很简单，我不想将值附加到表中。

我收集我应该使用局部变量或针对特定对象的函数，并假设有一些简单的代码，例如：

parkingLot.fillColr('red');

要么

parkingLot(fillColr: 'red');

要么

fillColor(parkingLot){
fillColor: 'red'
};

但是我在黑暗中射击。 任何建议都非常感谢。

谢谢，

Answer 1

在不知道您的Parkinggeojson模式的情况下很难说，但让我们想象一下它们就像

{
    "type": "FeatureCollection",

    "features": [{
        "type": "Feature",
        "properties": {
            "color": "red"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-116.9933, 34.0557, 14.3]
        }
    }, {
        "type": "Feature",
        "properties": {
            "color": "blue"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-147.7822, 61.9128, 38.3]
        }
    }, {
        "type": "Feature",
        "properties": {
            "color": "green"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-123.105, 38.6473, 1.1]
        }
    }, {
        "type": "Feature",
        "properties": {
            "color": "purple"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-122.7997, 38.8318, 2.3]
        }
    }]
}

现在，您还没有说要在哪里存储多边形。 您要实例化新的google.maps.Data图层吗？

如果是这样，那么新数据层中的每个要素都是google.maps.Data.Feature对象，可以使用getProperty()方法和一个非常类似于您的stylePolygons的函数对样式进行个性化设置，在每个要素上进行迭代并设置其颜色作为feature.getProperty('color') 。

如果您希望一步一步地对整个系列进行样式设置 ，那么您应该做的只是

parkingLot.setStyle({'color':'red' });

但这是假设parkingLot是google.maps.Data的实例。