3

这是我下面的代码。出于某种原因，正确渲染的唯一样式是笔触（它是白色）和不透明度（设置为 0.4）。但是，我的渐变似乎没有加载。相反，它全是红色的。为什么是这样？

<html>
<head>
    <meta charset="UTF-8">

    <title>Customizing Fusion Tables map using Fusion Tables' Javascript API</title>

    <style type="text/css">
        #map-canvas {
            height: 800px;
            width: 800px;
        }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <!-- Google Maps API -->
    <script type="text/javascript">
        var locationColumn = "geometry";
        var tableId = "1FbzvoRkdJzXvIxMJg2mGYVz5Q1BW2-4feMolgVc"; // California Census Tracts FT
        var condition = "'Median income (dollars)'>0";

        var mapOptions = {
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        function initialize() {
            var geocoder = new google.maps.Geocoder();
            var gmap = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
            var layer = new google.maps.FusionTablesLayer({
                query: {
                    select: locationColumn,
                    from: tableId,
                    where: condition
                },
                styles: [
                    {
                        polygonOptions: {
                            strokeColor: "#ffffff",
                            strokeOpacity: 0.4,
                            strokeWeight: 1,

                            fillColorStyler: {
                                kind: "fusiontables#gradient",
                                columnName: "Median income (dollars)",

                                gradient: {
                                    min: 28183.65,
                                    max: 122762.9,
                                    colors: [
                                        {
                                            color:"#990000",
                                            opacity:0.4
                                        },
                                        {
                                            color:"ffd966",
                                            opacity:0.4
                                        },
                                        {
                                            color:"#274e13",
                                            opacity:0.4
                                        }
                                    ]
                                }
                            }
                        }
                    }
                ]
            });

            geocoder.geocode(
                {
                    'address':'California'
                },
                function(results,status){
                    var sw = results[0].geometry.viewport.getSouthWest();
                    var ne = results[0].geometry.viewport.getNorthEast();
                    var bounds = new google.maps.LatLngBounds(sw,ne);
                    gmap.fitBounds(bounds)
                }
            );

            layer.setMap(gmap);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>
4

1 回答 1

2

更新 1

我做了更多的研究。不幸的是，不支持此功能。您的代码在文档new google.maps.FusionTablesLayer中没有提及渐变。我建议使用我的最后一个解决方案（效果很好）或支持渐变的业务人口统计层。这里也得出了同样的结论：Gradient for Fusion Table Layer。因此，回答您的问题：不，您不能使用基于 Google Maps JavaScript 的 API 创建渐变。

更新 0

我能够使用Google Maps JavaScript API v3: Layers完成所需的渐变。具体来说，我在Fusion Table Styles小节中找到了一个有用的示例。

工作示例：http: //jsbin.com/alahup/1/edit

相关代码

var layer = new google.maps.FusionTablesLayer({
  query: {
      select: locationColumn,
      from: tableId,
      where: condition
  },
  styles: [{
      where: "'Median income (dollars)' < 35000",
      polygonOptions: {
          fillColor: '#2EFEF7',
          fillOpacity: 0.4
      }
  }, {
      where: "'Median income (dollars)' > 34999.99 AND 'Median income (dollars)' < 65000",
      polygonOptions: {
          fillColor: '#2E9AFE',
          fillOpacity: 0.4
      }
  }, {
      where: "'Median income (dollars)' > 64999.99 AND 'Median income (dollars)' < 120000",
      polygonOptions: {
          fillColor: '#2E2EFE',
          fillOpacity: 0.4
      }
  }, {
      where: "'Median income (dollars)' > 119999.99",
      polygonOptions: {
          fillColor: '#0B0B61',
          fillOpacity: 0.4
      }
  }]
});

结果

融合表梯度示例

这是一个快速的解决方案：

var layer = new google.maps.FusionTablesLayer({
            query: {
                select: locationColumn,
                from: tableId,
                where: condition
            },
            styleId: 2 // <-- replace current style code with this
 });

Gradient for Fusion Table Layer有更多关于预定义样式的信息。我会进一步调查。

此外，谷歌的这个例子看起来和你想要完成的几乎一样。我会审查并使用他们的代码。

https://developers.google.com/fusiontables/docs/samples/adv_fusiontables

在此处输入图像描述

于 2012-12-14T23:52:54.480 回答