Question

我尝试为google map fusiontable设置样式。但是如果查询太长，则无法显示地图。

下面是我的示例代码。

如果我们评论第47行（其中：“状态（'AL'，'AL'，'AL'，......）和取消注释第48行（//其中：”状态（'AL'）“ ，），然后地图就可以了。

这是样本。实际上，我想写一个长查询来设置样式。

有什么建议吗？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#top-box {padding: 10px; background-color:#336699;}
.para-line {font-weight:bold;}
#map_canvas { height: 100% }
</style>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #top-box {padding: 10px; background-color:#336699;}
    .para-line {font-weight:bold;}
    #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
        var map;
        var infowindow;

        function initialize() {
            map = new google.maps.Map(document.getElementById("map_canvas"));
            map.setMapTypeId('roadmap');
            map.setCenter(new google.maps.LatLng(38.4985464, -98.3834298));

            map.setZoom(4);

            var tableid1 =  4436842;
            var style = [{
                where: "State in('IL','PA')",
                polygonOptions: 
                {
                    fillColor: "#rrggbb",
                    fillOpacity: 0.7  
                }
            },{
                where: "State in('AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL','AL')",
                //where: "State in('AL')",
                polygonOptions: 
                {
                    fillColor: "#006400",
                    fillOpacity: 0.7
                }
            }
            ];

            var query = {
                select: ['geometry','name'],
                from: tableid1,
                where: ""
            }

            var layer1 = new google.maps.FusionTablesLayer({
                query:query,
                styles: style,
                suppressInfoWindows: true,
                clickable:true,
                map:map,
            }); 

            google.maps.event.addListener(layer1, 'click', function(e) 
            {   
                var name = e.row['name'].value;
                if(infowindow) 
                    infowindow.close();
                else
                    infowindow = new google.maps.InfoWindow();

                //create info window layer
                infoWindowContent = infowindow.setContent(name);

                infowindow.setPosition(e.latLng);
                infowindow.open(map);            
            });
            return;
        } 
    </script>
    </head>
    <body onload="initialize()">    
    <div id="map_canvas" style="width:100%; height:100%"></div>
    </body>
    </html>

谷歌地图fusiontable样式查询sql不能长？

0 个答案: