0

I saved this code as an html file, but I'm not being able to visualize the map. I took the code directly from FusionTablesLayer Wizard 2.0. Is it something wrong with the code? I thought that it would be 'ready to use'. I need some help!

<!DOCTYPE html>
<html>
  <head>
  <style>
    #map-canvas { width:500px; height:400px; }
  </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() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(0, 0),
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      layerl0 = new google.maps.FusionTablesLayer({
        query: {
          select: "'geometry'",
      from: 1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc
    },
    map: map
  });
}
function changeMapl0() {
  var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
  layerl0.setOptions({
    query: {
      select: "'geometry'",
      from: 1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc,
      where: "'NOME' = '" + searchString + "'"
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div style="margin-top: 10px;">
      <label>Escolha a cidade</label>
      <select id="search-string-l0" onchange="changeMapl0(this.value);">
        <option value="">--Select--</option>
    <option value="ALVORADA">ALVORADA</option>
    <option value="ARARICA">ARARICA</option>
    <option value="ARROIO DOS RATOS">ARROIO DOS RATOS</option>
    <option value="CACHOEIRINHA">CACHOEIRINHA</option>
    <option value="CAMPO BOM">CAMPO BOM</option>
    <option value="CANOAS">CANOAS</option>
    <option value="CAPELA DE SANTANA">CAPELA DE SANTANA</option>
    <option value="CHARQUEADAS">CHARQUEADAS</option>
    <option value="DOIS IRMAOS">DOIS IRMAOS</option>
    <option value="ELDORADO DO SUL">ELDORADO DO SUL</option>
    <option value="ESTANCIA VELHA">ESTANCIA VELHA</option>
    <option value="ESTEIO">ESTEIO</option>
    <option value="GLORINHA">GLORINHA</option>
    <option value="GRAVATAI">GRAVATAI</option>
    <option value="GUAIBA">GUAIBA</option>
    <option value="IVOTI">IVOTI</option>
    <option value="MONTENEGRO">MONTENEGRO</option>
    <option value="NOVA HARTZ">NOVA HARTZ</option>
    <option value="NOVA SANTA RITA">NOVA SANTA RITA</option>
    <option value="NOVO HAMBURGO">NOVO HAMBURGO</option>
    <option value="PAROBE">PAROBE</option>
    <option value="PORTAO">PORTAO</option>
    <option value="PORTO ALEGRE">PORTO ALEGRE</option>
    <option value="ROLANTE">ROLANTE</option>
    <option value="SANTO ANTONIO DA PATRULHA">SANTO ANTONIO DA PATRULHA</option>
    <option value="SAO JERONIMO">SAO JERONIMO</option>
    <option value="SAO LEOPOLDO">SAO LEOPOLDO</option>
    <option value="SAPIRANGA">SAPIRANGA</option>
    <option value="SAPUCAIA DO SUL">SAPUCAIA DO SUL</option>
    <option value="TAQUARA">TAQUARA</option>
    <option value="TRIUNFO">TRIUNFO</option>
    <option value="VIAMAO">VIAMAO</option>
  </select>
</div>
  </body>
  </html>
4

2 回答 2

1

唯一缺少的是编码表ID周围的引号:-)

function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(0, 0),
        zoom: 1,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      layerl0 = new google.maps.FusionTablesLayer({
        query: {
          select: "'geometry'",
      from: "1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc"
    },
    map: map
  });
}

function changeMapl0() {
  var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
  layerl0.setOptions({
    query: {
      select: "'geometry'",
      from: "1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc",
      where: "'NOME' = '" + searchString + "'"
    }
  });
}

我将您的代码放在jsFiddle 上并进行更正。

于 2012-04-25T23:05:29.307 回答
0

我的理解是，加密的 doc id 仅适用于 Fusion Table API，但不适用于 Fusion Table 图层的 GMaps API。通过 FT UI 访问您的表，然后选择 File -> About，这将显示 Encrypted Id 和 Numeric ID。尝试使用数字 ID 而不是加密的 ID：

layerl0 = new google.maps.FusionTablesLayer({
        query: {
          select: "'geometry'",
      from: 1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc  // change this to numeric id
    },
于 2012-04-25T23:09:51.287 回答