重置按钮 - 创建一个功能和一个按钮，使其工作

问题描述：

我想在Fusion Tables Map中创建一个重置按钮，一旦它被点击，所有的标记都会显示出来。但有些东西没有用到它。请看看：重置按钮 - 创建一个功能和一个按钮，使其工作

这里是整个代码：

其实我tryed以“模拟”功能初始化（）从功能clearBox（）的layer10一部分。我也尝试使用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>

什么不发生？要“重置”选择元素，您不使用.value，您使用.selectedIndex，并将其设置为0.请查看http://jsfiddle.net/6WgFu/ – Ian 2012-07-27 02:39:52

没有“地图”变量你的代码。你如何初始化地图？你如何初始化FusionTablesLayer，你的初始查询是什么样的？你可能只需要重新运行它（就像我发布的例子）。 – geocodezip 2012-07-28 14:19:48

changeMapl0函数是什么？ – geocodezip 2012-07-28 14:34:19

答

听起来像是你需要像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中出现问题的外来逗号。

Working Example

是的，那是我想要做的！顺便说一下，伟大的地图！ – 2012-07-27 23:18:52

其实，我不想重置选择表单。我想重置地图上的标记！ – 2012-07-27 23:25:43

根据您上传的完整代码进行更新，包括一个工作示例 – geocodezip 2012-07-29 10:58:52

重置按钮 - 创建一个功能和一个按钮，使其工作

相关推荐