Google Fusion Map Javascript下拉菜单不工作_Javascript_Google Maps_Google Fusion Tables

Google Fusion Map Javascript下拉菜单不工作

javascript google-maps

Google Fusion Map Javascript下拉菜单不工作,javascript,google-maps,google-fusion-tables,Javascript,Google Maps,Google Fusion Tables,我已经实现了一个javascript菜单，允许用户使用Google Fusion表覆盖更改到不同的地图视图。不幸的是，我的下拉菜单不能单独或一起工作。例如，有人只想看到中东地区的港口，或者有人想看到印度次大陆地区的港口和ICD类型的港口第二个问题似乎是标记没有显示在融合表中。它们有不同的装运颜色和港口类型的ICD 这是我迄今为止的工作： <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/

我已经实现了一个javascript菜单，允许用户使用Google Fusion表覆盖更改到不同的地图视图。不幸的是，我的下拉菜单不能单独或一起工作。例如，有人只想看到中东地区的港口，或者有人想看到印度次大陆地区的港口和ICD类型的港口

第二个问题似乎是标记没有显示在融合表中。它们有不同的装运颜色和港口类型的ICD

这是我迄今为止的工作：

<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fusion Map</title>

    <style>
        body {margin:0 auto; width:960px;}
        #map_div {height:550px; width:100%; margin-top:50px;}
    </style>

    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script>
        var tableid = 1102368;
        var layer = new google.maps.FusionTablesLayer(1102368);

        function initialize() {
        var ports = new google.maps.LatLng(35.173808, 37.236325);
        var myOptions = {
            center: ports,
            zoom: 3,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_div'),
            myOptions);
                layer.setMap(map);
        }

        function refreshFusion() {
            var qry = "SELECT PortName, 'Region' FROM " + tableid;
            var region = document.getElementById('ddRegion').value;
            var type = document.getElementById('ddType').value;
            var filters = [];
            if(type != '') {
                filters.push("'Type' CONTAINS '" + type + "'");
            }
            if(type != '') {
                filters.push("'Region' CONTAINS '" + region + "'");
            }
            if(filters.lenght > 0) {
                qry += " WHERE " + filters.join(" AND ");
            }
            layer.setQuery(qry);
        }
    </script>

</head>

<body onload="initialize();">
    <div id="map_div"></div>

    <div>
        <h3>Region</h3> 
        <select id="ddRegion" style="width: 150px;" onchange="refreshFusion();">
            <option value="">All</option>
            <option value="Middle East">Middle East</option>
            <option value="Red Sea">Red Sea</option>
            <option value="East Mediterranean">East Mediterranean</option>
            <option value="West Mediterranean">West Mediterranean</option>
            <option value="Adriatic">Adriatic</option>
            <option value="Black Sea">Black Sea</option>
            <option value="North Africa">North Africa</option>
            <option value="Indian Sub-Continent">Indian Sub-Continent</option>
        </select>
        <h3>Type</h3> 
        <select id="ddType" style="width: 150px;" onchange="refreshFusion();">
            <option value="">All</option>
            <option value="Shipping">Shipping</option>
            <option value="ICD">ICD</option>
        </select>
    </div>
</body>
</html>

以下是融合表：

以下是现场代码：

非常感谢您的任何帮助

第37行，你说键入！=，我想你的意思是测试区域！='都在这里。第40行，你有filters.lenght，你应该有filters.length

如果您使用Firebug或Chrome Developer工具，则可以非常轻松地浏览代码并查看何时设置了哪些值。

您还需要将查询中的SELECT子句更改为以下内容：

"SELECT PortName FROM " + tableid;

因为在Fusion Tables层查询的SELECT子句中应该只有location列

一般来说，您可能需要考虑使用新的融合表层语法。这里可以看到一个例子：

谢谢你指出错误。我一直在向Firebug做自我介绍，但未能充分发挥Firebug的潜力。这一次也帮助解决了这个问题。非常感谢你！谢谢你的参考！这很有帮助。