1

Fusion Tables マップの最後の仕上げに手こずっています。クエリで [すべて選択] オプションを取得できるようにコードを変更するにはどうすればよいですか?

このコードを見つけました...

https://developers.google.com/fusiontables/docs/samples/change_query

そして、それを自分のコードに入れます。しかし、私は何を間違っていますか？

<!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>
4

2 に答える 2

2

あなたのコードを jsFiddle に入れましたが、少し改善しました: http://jsfiddle.net/odi86/hqm5k/

まず第一に、選択リストから使用可能な値を返す必要があるため、次のように変更しました。

<select id="search-string-10">
  <option value="">All</option>
  <option value="1000">1.000-10.000</option>
  <option value="10000">10.000-100.000</option>
  <option value="100000"> 100.000</option>
</select>

わかりやすくするために、「すべての」レコードに新しいエントリを追加しましたが、基本的には値を返さない最初のエントリと同じです。

そして、クエリでこの値を使用できます。

編集：特定のオプションが選択されていない場合、この関数を変更して、where条件を空の文字列に設定しました

function changeMap10(layer) {
    var searchString = document.getElementById('search-string-10').value;
    var whereCondition = '';
    if (searchString) {
        whereCondition = "zoekveld = '" + searchString + "'";
    }
    layer.setOptions({
        query: {
          select: "'Locatie'",
          from: 3555344,
          where: whereCondition 
        }
    });
 }

if/else は必要ありません。同じクエリをデフォルト値で使用できます。

最後に、例changeMap10()の関数の代わりに関数を呼び出すようにイベント リスナーを変更しました。updateMap()

google.maps.event.addDomListener(document.getElementById('search-string-10'),
    'change', function() {
      changeMap10(layer);
});
于 2012-04-17T12:45:29.183 に答える
0

大井 そうですね。この回答にはさらにいくつかの例があります: https://stackoverflow.com/a/9401345/1211981 また、すべてのレコードを取得するには、空の where 句を使用できます。

where: ""

また、数字には引用符が必要ないため、おそらく次のようになります。

where: "Dodental > " + searchString,
于 2012-04-17T13:16:52.133 に答える