Question

我将此代码保存为html文件，但我无法将地图可视化。我直接从FusionTablesLayer Wizard 2.0获取代码。代码有问题吗？我以为它会“准备好使用”。我需要一些帮助！

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

Answer 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 with my correction上。

Answer 2

我的理解是加密的doc id仅适用于Fusion Table API，但不适用于Fusion Table层的GMaps API。通过FT用户界面访问您的表格，然后选择文件 - ＆gt;关于哪个将显示加密ID和数字ID。尝试使用数字ID而不是加密ID：

layerl0 = new google.maps.FusionTablesLayer({
        query: {
          select: "'geometry'",
      from: 1x46BzbRzLVz2S4_ml5Nx4oto2930DFrH39TM3uc  // change this to numeric id
    },

融合表地图未显示

2 个答案: