FusionTables更新查询不起作用

我正在用下拉菜单构建FusionTables地图。我希望地图上的标记根据用户在下拉菜单中的选择进行更改。每个菜单选项都对应于Fusion Table中“可能性”列的三个选项。我使用这些链接作为参考：FusionTables更新查询不起作用

http://sportstleo12.appspot.com/和https://developers.google.com/fusiontables/docs/samples/change_query

我已经复制的代码，到目前为止，我可以得到所有的选项来显示，但它不会根据用户的结果进行过滤选择。我相信这很简单。有任何想法吗？

这里是迄今为止代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 

<head> 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 

<meta charset="UTF-8"> 

<title>Test Page 18</title> 

<link href="/apis/fusiontables/docs/samples/style/default.css" 

rel="stylesheet" type="text/css"> 


<style> 

body { 
font-family: sans-serif; 
background-image: url(images/squairy_light.png); 
} 

#main-container { 
border: 1px solid; 
border-color: #E0E0E0; 
width:1280px; 
margin: auto; 
border-radius:3px; 
padding-top: 15px; 
background-color: white; 
} 
#map-canvas { 
    width:1250px; 
    height:600px; 
    margin: auto; 
    } 
#drop-down { 
width:1250px; 
margin: auto; 
padding-top: 10px; 
padding-bottom: 10px; 

} 
#title { 
width:1280px; 
margin: auto; 
padding-top: 10px; 
font: sans-serif; 
} 

.layer-wizard-search-label { font-family: sans-serif }; 

</style> 



<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script src="/path/to/fusiontips_compiled.js" type="text/javascript"></script> 

<script type="text/javascript"> 


function initialize() { 

var tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ'; 
var locationColumn = 'Lat/Long'; 

var map = new google.maps.Map(document.getElementById('map-canvas'), { 

center: new google.maps.LatLng(40, 345), 

zoom: 3, 

mapTypeId: google.maps.MapTypeId.ROADMAP 

}); 

var layer = new google.maps.FusionTablesLayer({ 
     query: { 
     select: locationColumn, 
     from: tableId, 
     }, 
     map: map, 
    }); 

google.maps.event.addDomListener(document.getElementById('option-list'), 
     'change', function() { 
      updateMap(layer, tableId, locationColumn); 
    }); 
    } 

    // Update the query sent to the Fusion Table Layer based on 
    // the user selection in the select menu 
    function updateMap(layer, tableId, locationColumn) { 
    var delivery = document.getElementById('option-list').value; 
    if (delivery) { 
     layer.setOptions({ 
     query: { 
      select: locationColumn, 
      from: tableId, 
      where: "option-list = '" + delivery + "'" 
     } 
     }); 
    } else { 
     layer.setOptions({ 
     query: { 
      select: locationColumn, 
      from: tableId 
     } 
     }); 
    } 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 


</script> 


</head> 

<body> 



<div id="title"><h1>Possibility Options</h1></div> 
<div id="main-container"> 

<div id="map-canvas"></div> 



<div id="drop-down"> 

<label>Possibilities:</label> 

<select id="option-list"> 

<option value="">--All Possibilities--</option> 

<option value="Yes">Yes</option> 

<option value="No">No</option> 

<option value="Maybe">Maybe</option> 


</select> 
</div> 

</div> 



</body> 

</html>

来源

2013-08-21 user2665799

请发表你的答案为_answer_不作为问题的一部分。如果你描述了问题是什么以及解决了什么问题，那也是有用的。 – geocodezip

我不知道什么是错的我之前发布的代码。我发现这个链接，帮我把它写不同和solce我的问题：

http://jsfiddle.net/odi86/vw4YC/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 

<head> 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 

<meta charset="UTF-8"> 

<title>Test Page 18</title> 

<link href="/apis/fusiontables/docs/samples/style/default.css" 

rel="stylesheet" type="text/css"> 


<style> 

body { 
font-family: sans-serif; 
background-image: url(images/squairy_light.png); 
} 

#main-container { 
border: 1px solid; 
border-color: #E0E0E0; 
width:1280px; 
margin: auto; 
border-radius:3px; 
padding-top: 15px; 
background-color: white; 
} 
#map-canvas { 
    width:1250px; 
    height:600px; 
    margin: auto; 
    } 
#drop-down { 
width:1250px; 
margin: auto; 
padding-top: 10px; 
padding-bottom: 10px; 

} 
#title { 
width:1280px; 
margin: auto; 
padding-top: 10px; 
font: sans-serif; 
} 

.layer-wizard-search-label { font-family: sans-serif }; 

</style> 



<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script src="/path/to/fusiontips_compiled.js" type="text/javascript"></script> 

<script type="text/javascript"> 

var tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ'; 

var layer = new google.maps.FusionTablesLayer({ 
     query: { 
     select: 'Lat/Long', 
     from: tableId, 
     }, 
     styleId: 2, 
     templateId: 2, 
    }); 


function initialize() { 


map = new google.maps.Map(document.getElementById('map-canvas'), { 

center: new google.maps.LatLng(40, 345), 

zoom: 3, 

mapTypeId: google.maps.MapTypeId.ROADMAP 

}); 
layer.setMap(map); 
} 


//Change the query based on the user's selection 
function changeMap() { 
    possibility = document.getElementById('Possibility').value; 
    where = " Possibility LIKE '%" + possibility + "%'"; 

    layer.setOptions({ 
     query: { 
      select: 'Lat/Long', 
      from: tableId, 
      where: where 
     } 
    }); 
} 

    google.maps.event.addDomListener(window, 'load', initialize); 


</script> 


</head> 

<body> 



<div id="title"><h1>Possibility Options</h1></div> 
<div id="main-container"> 

<div id="map-canvas"></div> 



<div id="drop-down"> 

<label for="Possibility">Possibilities:</label> 

<select id="Possibility" onChange="changeMap();"> 

<option value="">--All Possibilities--</option> 

<option value="Yes">Yes</option> 

<option value="No">No</option> 

<option value="Maybe">Maybe</option> 


</select> 
</div> 

</div> 



</body> 

</html>

来源

2013-08-21 20:48:17 user2665799

FusionTables更新查询不起作用

回答

相关问题