我正在尝试在Fusion Tables Map中创建一个重置按钮,一旦点击它就会显示所有标记。但事情并没有奏效。请看一下:
这是完整的代码:
实际上我试图从函数clearBox()的layer10部分“模仿”函数initialize()。我也尝试使用reset()方法,但它也没有用。
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:600px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-30.070876662388095, -51.1907958984375),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'ENDERECO'",
from: '3385625'
},
map: map
});
}
function changeMapl0() {
var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
layerl0.setOptions({
query: {
select: "'ENDERECO'",
from: 3385625,
where: "'TIPO' = '" + searchString + "'"
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
//Function to be activated by the reset button
function clearBox() {
document.getElementById('search-string-l0').value = "";
layerl0 = google.maps.FusionTablesLayer({
query: {
select: "'ENDERECO'",
from: '3385625'
},
});
}
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label>Tipo</label>
<select id="search-string-l0" onchange="changeMapl0 (this.value);">
<option value="">--Select--</option>
<option value="Comidas variadas">Comidas variadas</option>
<option value="Restaurante">Restaurante</option>
<option value="Bar">Bar</option>
<option value="Hotel">Hotel</option>
<option value="Shopping Center">Shopping Center</option>
<option value="Teatro">Teatro</option>
<option value="Igreja">Igreja</option>
<option value="Museu">Museu</option>
<option value="Espaço de Cultura">Espaço de Cultura</option>
</select><br/>
<input type="button" onclick="clearBox()" value="Reset Map" />
</div>
</body>
</html>
答案 0 :(得分:1)
您需要从此this map
重置recent post on SO之类的查询查看完整代码,使其工作的最简单方法是将重置功能更改为仅更改查询,而不是重新创建FusionTablesLayer:
变化:
function clearBox() {
document.getElementById('search-string-l0').value = "";
layerl0 = google.maps.FusionTablesLayer({
query: {
select: "'ENDERECO'",
from: '3385625'
},
});
}
为:
function clearBox() {
document.getElementById('search-string-l0').value = "";
layerl0.setOptions({
query: {
select: "'ENDERECO'",
from: '3385625'
}
});
}
注意:我还删除了一个可能导致IE出现问题的无关逗号。