1
Fusion Tables지도의 마지막 터치가 붙어 있습니다. 쿼리에서 모두 선택 옵션을 얻을 수 있도록 코드를 변경해야합니까? 나는이 코드 조각을 발견 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이라는 세 가지 범주가 있습니다. 그리고 검색 문자열을 "zoekveld ="+ searchString,으로 변경했습니다. 그러나 값을 비워두면 모든 옵션이 표시되지 않습니다. [http://jsfiddle.net/hqm5k/8/]에서 코드를 확인하십시오. –
알겠습니다. 위의'changeMap10()'함수를 변경했거나 새로운 버전을 확인할 수 있습니다 : http://jsfiddle.net/odi86/hqm5k/10/ – Odi