0

チェックボックスを使用してマップ上の特定のマーカーを非表示または表示できるフュージョン テーブルとレイヤーを作成しました。パンとズーム機能のように機能する検索機能を追加したいと考えています。さらに、マップがその場所にズームしたら、特定のエリア内の他の場所を識別する半径オプションが必要です。IN クエリ (https://developers.google.com/fusiontables/docs/samples/in) にあるサンプル コードを変更し、チェックボックスを機能させることができますが、パンとズームのコード ( https://developers.google.com/fusiontables/docs/samples/search_and_zoom)、検索機能が動作しないようです。

約 4000 レコードのフュージョン テーブルが 1 つあります。私はコーディングの初心者なので、それが私の構文にあると確信しています。私がやりたいことは可能だと思いますか？

どんな助けでも大歓迎です。

これがコードです。示されているように、パンとズーム機能を利用した検索を挿入したいと考えています。挿入またはフォーマットする方法がわからなかったため、以下のコードから削除しました。

 <head>
  <style>
    #map-canvas { width:800px; 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() {
        var tableId = '4422804';

        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(50.792047064406866, -99.052734375),
          zoom: 2,
          mapTypeId: google.maps.MapTypeId.HYBRID
        });

        var layer = new google.maps.FusionTablesLayer();
        filterMap(layer, tableId, map);

        google.maps.event.addDomListener(document.getElementById('< 5'),
            'click', function() {
              filterMap(layer, tableId, map);
        });

        google.maps.event.addDomListener(document.getElementById('> 5'),
            'click', function() {
              filterMap(layer, tableId, map);
        });

        google.maps.event.addDomListener(document.getElementById('Not Signed'),
            'click', function() {
              filterMap(layer, tableId, map);
        });

    google.maps.event.addDomListener(document.getElementById('Signed Not Selling'),
            'click', function() {
              filterMap(layer, tableId, map);

    });
      }

      // Filter the map based on checkbox selection.
      function filterMap(layer, tableId, map) {
        var where = generateWhere();

        if (where) {
          if (!layer.getMap()) {
            layer.setMap(map);
          }
          layer.setOptions({
            query: {
              select: 'Full Address',
              from: tableId,
              where: where
            }
          });
        } else {
          layer.setMap(null);
        }
      }

      // Generate a where clause from the checkboxes. If no boxes
      // are checked, return an empty string.
      function generateWhere() {
        var filter = [];
        var stores = document.getElementsByName('store');
        for (var i = 0, store; store = stores[i]; i++) {
          if (store.checked) {
            var storeName = store.value.replace(/'/g, '\\\'');
            filter.push("'" + storeName + "'");
          }
        }
        var where = '';
        if (filter.length) {
          where = "'Map' IN (" + filter.join(',') + ')';
        }
        return where;
      }
          google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
4

1 に答える 1

0

チェックボックスなどは含まれていませんでしたが、チェックボックスではなくボタンを使用して機能する例を次に示します。それをあなたのニーズに適応させるのは難しくありません。これは実際には別の質問です。

http://jsfiddle.net/ebridger/wmnDU/

于 2012-06-28T09:52:52.930 に答える