1
Fusion Tablesマップの最終的なタッチで悩んでいます。クエリでSelect Allオプションを得るために、コードを変更する必要がありますか？私は、コードのこの部分を見つけ Google Fusion Tablesクエリ：すべてを選択してください。
...https://developers.google.com/fusiontables/docs/samples/change_query
そして、私自身のコードでそれを置きます。しかし、私は間違って何をしていますか？すべてのhttp://jsfiddle.net/odi86/hqm5k/
まず：
<!DOCTYPE html>
<html>
<head>
<title>Aarbevingen 1900-2012 (+1000 dodelijke slachtoffers)</title>
<style>
#map-canvas { width:1000px; 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 layer;
var layerl1;
var layerl2;
var layerl3;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(0, 20),
zoom: 2
});
var style = [
{
featureType: 'all',
elementType: 'all',
stylers: [
{ saturation: -99 }
]
}
];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
layer = new google.maps.FusionTablesLayer({
query: {
select: "'Locatie'",
from: 3555344
},
map: map
});
layer11 = new google.maps.FusionTablesLayer({
query: {
select: "'geometry'",
from: 3556478
},
clickable: false,
map: map
});
layer12 = new google.maps.FusionTablesLayer({
query: {
select: "'geometry'",
from: 3556541
},
clickable: false,
map: map
});
layer13 = new google.maps.FusionTablesLayer({
query: {
select: "'geometry'",
from: 3556712
},
clickable: false,
map: map
});
google.maps.event.addDomListener(document.getElementById('search-string-10'),
'change', function() {
updateMap(layer);
});
var legendDiv = document.createElement('DIV');
var legend = new Legend(legendDiv, map);
legendDiv.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legendDiv);
}
function changeMap10(layer) {
var searchString = document.getElementById('search-string-10').value;
if (searchString) {
layer.setOptions({
query: {
select: "'Locatie'",
from: 3555344,
where: "search-string-10 = '" + searchString + "'"
}
});
} else {
layer.setOptions({
query: {
select: "'Locatie'",
from: 3555344
}
});
}
}
function Legend(controlDiv, map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
// Set CSS for the control border
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.title = 'Legend';
controlDiv.appendChild(controlUI);
// Set CSS for the control text
var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '11px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
// Add the text
controlText.innerHTML = '<b>Legenda</b><br />' +
'<div style="background-color: #ff0000; height: 10px; width: 10px; margin: 2px; float: left;"></div>> 100.000 doden<br />' +
'<div style="background-color: #ffff00; height: 10px; width: 10px; margin: 2px; float: left;"></div>10.000-100.000 doden<br />'+
'<div style="background-color: #00ff00; height: 10px; width: 10px; margin: 2px; float: left;"></div>1.000-10.000 doden<br />';
controlUI.appendChild(controlText);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label>Dodental</label>
<select id="search-string-10">
<option value="">--Selecteer--</option>
<option value="1.000-10.000">1.000-10.000</option>
<option value="10.000-100.000">10.000-100.000</option>
<option value="> 100.000">> 100.000</option>
</select>
</div>
</body>
</html>
スクリプトにいくつかの変更を加えなければなりませんでした。別の列の名前を 'zoekveld'で検索する必要があったからです。ここでは、1、2、3という3つのカテゴリがあります。そして、検索文字列を "zoekveld =" + searchString、に変更しました。しかし、値を空のままにすると、私はすべてのオプションを取得しません。 [http://jsfiddle.net/hqm5k/8/]のコードを確認してください。 –
わかりました。上記の 'changeMap10（）'関数を変更したか、ここで新しいバージョンをチェックすることができます：http://jsfiddle.net/odi86/hqm5k/10/ – Odi