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

Question

How do I fillColor map layers individually? I have a function set up to style building polygons based on a value stored in the GeoJSON. Please excuse my ignorance in terminology. I am new to JS and have been at this problem for a solid week, searching the web and watching hours of tutorials, but can't answer this specific question.

My functioning code contains to the following to initialize and create the map:

    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);
        });
};

Later in the script I use this, which works, to color the buildings

// 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
            };
        });
    };

How do I style the rest of my layers individually? An inline code or simple function would be good as the layers are simple and I don't want to append values to their tables.

I gather I should use a local variable, or a function targeting specific objects, and assume there is some simple code such as:

parkingLot.fillColr('red');

or

parkingLot(fillColr: 'red');

or

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

but i'm shooting in the dark. Any advice is really appreciated.

Thanks,

Answer 1

it's difficult to say without knowing the schema of your parkinglot geojson, but let's imagine they are something like

{
    "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]
        }
    }]
}

Now, you haven't said where are you storing your polygons. Are you instantiating a new google.maps.Data layer?

If you are, then every feature in your new data layer is a google.maps.Data.Feature object and it can be styles individualy using the getProperty() method and a function much alike your stylePolygons , iterating on each feature and setting its color as the outcome of feature.getProperty('color') .

If you're looking to style the whole collection in one step , then you should do just

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

but this is assuming parkingLot is an instance of google.maps.Data.