gpt4 book ai didi

javascript - Google Fusion Map Javascript 下拉菜单不起作用

转载 作者:行者123 更新时间:2023-12-02 19:53:42 26 4
gpt4 key购买 nike

我已经实现了一个 JavaScript 菜单,允许用户使用 Google Fusion Table 叠加层更改为不同的 map View 。不幸的是,我的下拉菜单不能单独或一起工作。例如,有人只想查看“中东”区域的端口,或者有人想查看“印度次大陆”区域和“ICD”端口类型的端口。

第二个问题似乎是标记没有按照 Fusion Table 中的标识显示。对于港口的“类型”,“运输”和“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>

这是融合表:Link

这是实时代码:Link

非常感谢任何和所有帮助!

最佳答案

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

"SELECT PortName FROM " + tableid;

因为 Fusion Tables 层查询的 SELECT 子句中只应包含位置列。

一般来说,您可能还想考虑使用新的 Fusion Tables Layer 语法。可以在此处查看示例:

http://code.google.com/apis/fusiontables/docs/samples/change_query.html

关于javascript - Google Fusion Map Javascript 下拉菜单不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8933663/

26 4 0