2

フュージョン テーブルの 1 つからのポリゴンを含むマップを表示する、Google からの次の変更されたコードがあります。Fusion テーブルには、id と geometry の 2 つのフィールドがあります。ポリゴンは、うまく機能するホバーでうまく表示されます。

私の質問は、クリックされたポリゴンの ID 番号を表示するコンテンツ ウィンドウ div を取得する方法です。テストリスナーは現在、クリックするとコンテンツウィンドウのdivに「テスト」テキストを表示しますが、フュージョンテーブルクエリにあるクリックされたポリゴンのIDを表示することはできません(var query = 'SELECT id,geometry FROM ' + 'MYMAPID';)

   <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map;

function initialize() {
    var myOptions = {
      zoom: 6,
      center: new google.maps.LatLng(32.157435,-82.907123),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),myOptions);

    // Initialize JSONP request
    var script = document.createElement('script');
    var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
    url.push('sql=');
    var query = 'SELECT id,geometry FROM ' + 'MYMAPID';
    var encodedQuery = encodeURIComponent(query);
    url.push(encodedQuery);
    url.push('&callback=drawMap');
    url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
    script.src = url.join('');
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(script);
  }

function drawMap(data)
{
    var rows = data['rows'];
    for (var i in rows)
    {
        newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);

        var country = new google.maps.Polygon
        ({
            paths: newCoordinates,
            strokeColor: "#ff0000",
            strokeOpacity: 1,
            strokeWeight: 1,
            fillOpacity: 0.3
        });

        google.maps.event.addListener(country, 'mouseover', function() {
          this.setOptions({fillOpacity: 1});
        });

        google.maps.event.addListener(country, 'mouseout', function() {
          this.setOptions({fillOpacity: 0.3});
        });
        //test listener
        google.maps.event.addListener(country, 'click', function() {
         document.getElementById('content-window').innerHTML ='test';
        });

        country.setMap(map);
    }
}


function constructNewCoordinates(polygon)
{
    var newCoordinates = [];
    var coordinates = polygon['coordinates'][0];
    for (var i in coordinates)
    {
        newCoordinates.push(
        new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
    }
    return newCoordinates;
}

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

ありがとう：）

編集：

@geocodezip がリスナーの使用と使用に役立った ID を取得できると思いました。

google.maps.event.addListener(country, 'click', function() {

          getAreas(id);

        });

...以下の関数に渡して、そのIDを持つ別のFusion Tableから複数の「名前」フィールドを取得します。

function getAreas(id)
{
// Initialize JSONP request
    var script = document.createElement('script');
    var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
    url.push('sql=');
    var query = 'SELECT name FROM ' + 'MY TABLE 2' + 'WHERE id=' + id;
    var encodedQuery = encodeURIComponent(query);
    url.push(encodedQuery);
    url.push('&callback=showAreas');
    url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
    script.src = url.join('');
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(script);

}

function showAreas(data)
{
    var rows = data['rows'];
    for (var i in rows)
    {         
        var name = rows[i][0];       
        document.getElementById('content-window').innerHTML = name;
    }
}

しかし、これはうまくいきません。誰かが私が間違っていることを理解していますか?

ありがとう

4

1 に答える 1

4

この例から始めた場合、ID は次のとおりです。

 var id = rows[i][0];

それを「国」ポリゴンに関連付けるには、関数クロージャーを使用します。

  function createPolygon(country,id)
  {
        google.maps.event.addListener(country, 'mouseover', function() {
          this.setOptions({fillOpacity: 1});
        });
        google.maps.event.addListener(country, 'mouseout', function() {
          this.setOptions({fillOpacity: 0.3});
        });
        google.maps.event.addListener(country, 'click', function() {
           document.getElementById('content-window').innerHTML = id;
        });
  }

実施例

于 2012-07-05T06:58:11.887 に答える