2012-04-25 66 views
0

我将此代码保存为html文件,但我无法将地图可视化。我直接从FusionTablesLayer向导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> 

回答

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

0

我的理解是,加密文档ID只适用于Fusion Table API,不适用于Fusion Tables API的Fusion Tables层。通过FT用户界面访问您的表格,然后选择文件 - >关于它将显示加密标识和数字标识。尝试使用,而不是加密ID数字ID:

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

这应该工作,但是我觉得很有道理,如果你用它在其他地方,切换到ENCID(也就是说,如果你使用的Fusion Tables API _and_ GMaps API) 。 – Odi 2012-04-26 06:15:21

+0

谢谢。我还没有意识到地图API支持encid – 2012-04-26 13:12:46