Javascript 使用下拉菜单层自定义Fusion表的信息窗口
我已经创建了一个Fusionables分层贴图，在这里，我根据下拉菜单中的选择交换了tableId和可见的贴图标记。一旦您做出选择，我就很难为每个层自定义infoWindow属性。在浏览了几个参考页面和教程之后，我尝试了对infoWindow进行样式化，并且尝试实现infoBox选项也没有成功。我已经在Fusionables工作区中设置了infoWindow的样式，但是这些样式并不导入。到目前为止，我已经附上了我的代码；有人有什么建议我可以试试看吗。自定义窗口内容选择窗口中显示哪些可熔合列和后续数据，以及b。是否设置窗口本身的样式 非常感谢您的帮助，谢谢Javascript 使用下拉菜单层自定义Fusion表的信息窗口,javascript,google-fusion-tables,Javascript,Google Fusion Tables,我已经创建了一个Fusionables分层贴图，在这里，我根据下拉菜单中的选择交换了tableId和可见的贴图标记。一旦您做出选择，我就很难为每个层自定义infoWindow属性。在浏览了几个参考页面和教程之后，我尝试了对infoWindow进行样式化，并且尝试实现infoBox选项也没有成功。我已经在Fusionables工作区中设置了infoWindow的样式，但是这些样式并不导入。到目前为止，我已经附上了我的代码；有人有什么建议我可以试试看吗。自定义窗口内容选择窗口中显示哪些可熔合列和后续
<!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>Layered Map</title>
<link href="/apis/fusiontables/docs/samples/style/default.css"
rel="stylesheet" type="text/css">
<style>
#map-canvas { width:1250px; height:600px; }
.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/infobox.js" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
function initialize() {
var tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ';
var locationColumn = 'Lat/Long';
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(40, 265),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: locationColumn,
from: tableId
}
});
google.maps.event.addDomListener(document.getElementById('option'),
'change', function() {
updateMap(layer, tableId, locationColumn);
});
}
function updateMap(layer, tableId, locationColumn) {
var option = document.getElementById('option').value;
if (option) {
switch(option){
case "2": tableId = '1io74LWVjfOc_MDtoMlnPc3EiLg_uYYrdImQs43w';
break;
case "3": tableId = '1LbTKT2JJ86I9smoa7Xrryo7mRLeC78Tiop9j7x0';
break;
default:
case "1": tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ'; // first tableId
break;
}
layer.setOptions({
query: {
select: locationColumn,
from: tableId,
},
map: map,
styleId: 2,
templateId: 2,
});
} else {
layer.setMap(null);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<label>Layer:</label>
<select id="option">
<option selected>--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
</html>
在函数中添加styleId和templateId以更改表，并修复相应的表：
switch(option){
case "2": tableId = '1io74LWVjfOc_MDtoMlnPc3EiLg_uYYrdImQs43w';
var templateId =2;
var styleId =2;
break;
case "3": tableId = '1LbTKT2JJ86I9smoa7Xrryo7mRLeC78Tiop9j7x0';
var templateId =2;
var styleId =3;
break;
default:
case "1": tableId = '1JEUbXBVguPhTwEPncLV0GkF49Tp3ImCooKGGADQ'; // first tableId
var templateId =2;
var styleId =2;
break;
}
layer.setOptions({
query: {
select: locationColumn,
from: tableId,
},
map: map,
styleId: styleId,
templateId: templateId,
});
为了让FusionTable能够使用格式化的信息窗口，您需要通过令人敬畏的测试，我已经编辑了我的代码并添加了styleId:2，templateId:2，现在它正在根据请求为前两层添加样式，但不是第三层？也许这是使用不同的temlateId或styleId？是有意义的。我不知道如何单独申报？