Question

我需要创建this map的新等值版本，其中多边形＆＃39; colorFills从我与原始融合表合并的表中响应列中的数据（＆＃34; PERCENTAGE＆＃34;）。根据百分比，多边形将为绿色，黄色或红色。

我正在使用由其他人为项目构建的wordpress插件。

var map;
function initMap() {
    var myOptions = {
        zoom: 4,
        center: new google.maps.LatLng( 51.41467424448992, 16.737563625000007 ),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    // google maps styles go below here...

    map.setOptions( { styles: styles } );

    // Initialize JSONP request
    var script = document.createElement( 'script' );
    var url = ['https://www.googleapis.com/fusiontables/v2/query?'];
    url.push( 'sql=' );
    var query = 'SELECT name, iso_a2, kml_4326 FROM ' +
            '1_XPSB5N6EOCr5i9etLrR0HA3717jfyk4iOamXWqu';
    var encodedQuery = encodeURIComponent( query );
    url.push( encodedQuery );
    url.push( '&callback=drawMap' );
    url.push( '&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ' );
    script.src = url.join( '' );
    var body = document.getElementsByTagName( 'body' )[0];
    body.appendChild( script );
}

function drawMap( data ) {
    //console.log(getCountry);
    //console.log(data['rows']);
    var rows = data['rows'];
    for ( var i in rows ) {
        if ( rows[i][0] != 'Antarctica' ) {
            var newCoordinates = [];
            var geometries = rows[i][2]['geometries'];
            if ( geometries ) {
                for ( var j in geometries ) {
                    newCoordinates.push( constructNewCoordinates( geometries[j] ) );
                }
            } else {
                newCoordinates = constructNewCoordinates( rows[i][2]['geometry'] );
            }
            var fillColor = "#fff";
            var strokeColor = "transparent";//#333 ()

            if ( getCountry[rows[i][1]] ) {
                fillColor = "#fbbd2b";
                strokeColor = "#ff9900";
            }
            var country = new google.maps.Polygon( {
                paths: newCoordinates,
                strokeColor: strokeColor,
                strokeOpacity: 1,
                strokeWeight: 0.4,
                fillColor: fillColor,
                fillOpacity: 0.18,
                name: getCountry[rows[i][1]],
                nameCode: rows[i][1]
            } );


            if ( getCountry[rows[i][1]] ) {
                google.maps.event.addListener( country, 'mouseover', function () {
                    this.setOptions( { fillOpacity: 0.4 } );
                } );
                google.maps.event.addListener( country, 'mouseout', function () {
                    this.setOptions( { fillOpacity: 0.18 } );
                } );
                google.maps.event.addListener( country, 'click', function () {
                    GetCounty( this.nameCode ); console.log(this.nameCode);
                } );
            }
            google.maps.Polygon.prototype.my_getBounds = function () {
                var bounds = new google.maps.LatLngBounds();
                this.getPath().forEach( function ( element, index ) {
                    bounds.extend( element );
                } );
                return bounds;
            };
            var lat = country.my_getBounds().getCenter().lat();
            var lng = country.my_getBounds().getCenter().lng();
            country.setMap( map );
        }
    }
}

function constructNewCoordinates( polygon ) {
    var newCoordinates = [];
    var coordinates = polygon['coordinates'][0];
    for ( var i in coordinates ) {
        newCoordinates.push(
                new google.maps.LatLng( coordinates[i][1], coordinates[i][0] ) );
    }
    return newCoordinates;
}
    // Search form, contentpop code goes below here

我尝试将这些样式添加到新的google.maps.Polygon＆＃39;变量（如下所示），但它没有工作，所以我想知道我哪里出错了。任何建议赞赏。

    {
    where: 'PERCENTAGE < 33.3%',
       polygonOptions: {
          fillColor: '#0000FF'
        }

Answer 1

尝试'PERCENTAGE＆lt;相反，0.33'。该列的格式为百分比，但实际值为普通数字。如果在该列上添加过滤器，则可以看到此内容。

Answer 2

所以，我仍然不确定为什么我无法在“var country new google.maps.Polygon”中使用它，但使用“var layer = new google.maps.FusionTablesLayer”进行管理

    var layer = new google.maps.FusionTablesLayer({
                query: {
                select: 'iso_a2',
                from: '1_XPSB5N6EOCr5i9etLrR0HA3717jfyk4iOamXWqu'
                },
                    styles: [{
                    where: 'PERCENTAGE < 33.3',
                    polygonOptions: {
                    fillColor: "#92bf24",
                    strokeColor: "#ff9900",
                } 
                }]
                });
                layer.setMap(map);

下拉列表中会有4个不同的地图，所以我可能会看到是否可以找到一种更方便的方式来设置多边形的样式 - 可能来自SQL表，这对我来说是一个未知的领域。

基于合并表数据的Fusion Tables多边形填充

2 个答案: