2013-01-22 28 views
0

這是我在這裏的第一篇文章,所以我很抱歉如果我做一個新手人造口。Fusion Table圖層InfoWindow顯示幾何字段中的所有頂點

我有一個Google Fusion Table layer,我已經在地圖上。我通過導入KML文件來創建它。一切都很好,但上週我意識到InfoWindow現在正在幾何體字段中顯示相關多邊形的所有頂點。

奇怪的是,這些頂點不會顯示在實際的Fusion Table中,而只會顯示在地圖頂部的圖層上。我懷疑可能會出現JavaScript代碼,這是我非常熟悉的,也可能是Fusion Tables的新API。

我體內取出部分來解決這個頁面上的一些格式問題,但這裏是代碼:

<!DOCTYPE html> 
<html> 
       <head> 
       <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
       <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
       <title>Georgia Areas</title> 

       <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 

       <script type="text/javascript" src="http://www.google.com/jsapi"></script> 


       <style type="text/css"> 
           html { height: 100% } 
           body { height: 100%; margin: 0; padding: 0 } 
           #map_canvas { height: 100%; weight: 100% } 
           #search-panel { 
               position: absolute; 
       `        top: 10px; 
               left: 50%; 
               margin-left: -180px; 
               width: 350px; 
               z-index: 5; 
               background-color: #fff; 
               padding: 5px; 
               border: 1px solid #999; 
           } 
           #address { 
               width: 345px; 
           } 
           #instruction { 
               position: fixed; 
               float: right; 
               bottom: 10px; 
               right: 20px; 
               width: 375px; 
               z-index: 4; 
               background-color: #fff; 
               padding: 7px; 
               border: 1px solid #999; 
               font-family:"Arial"; 
           } 
           p.small {font-size: small} 
       </style> 

       <script type="text/javascript" 
       src="http://maps.googleapis.com/maps/api/js?key=AIzaSyARy6zbLmjvq3uaPjI--s45afA0LA-ynnA&amp;sensor=false"> 
       </script> 


       <script type="text/javascript"> 

       var infoWindow = new google.maps.InfoWindow(); 

       var input = document.getElementById('address'); 

       var geocoder; 
       var gaCentroid; 
       var gaBounds; 
       var myMap; 


       function myclick(num) { 
           google.maps.event.trigger(markers[num], "click"); 
       } 


       function initialize() { 

           geocoder = new google.maps.Geocoder();       

           gaCentroid = new google.maps.LatLng(32.900000, -83.22671); 

           gaBounds = new google.maps.LatLngBounds(
               new google.maps.LatLng(30.34,-85.652), 
               new google.maps.LatLng(35.01,-80.85) 
           ); 

           var mapOptions = { 
               center: gaCentroid, 
               zoom: 8, 
               mapTypeId: google.maps.MapTypeId.ROADMAP 
           }; 

           myMap = new google.maps.Map(document.getElementById("map_canvas"), 
               mapOptions); 

           var lyr = new google.maps.FusionTablesLayer({ 
               query: { 
                   select: 'geometry', 
                   from: '1Bgo94POIxKwQOOltuFbaAW6CpjQqPvYLVSqXuLk' 
               }, 
               styles: [{ 
                   polygonOptions: { 
                       fillColor: '0xDEEBF7', 
                       fillOpacity: 0.1 
                   } 
               }] 
           }); 

           lyr.setMap(myMap); 

       } 


       function codeAddress() { 
           var address = document.getElementById('address').value; 
           geocoder.geocode({'address':address}, function(results, status) { 
               if (status == google.maps.GeocoderStatus.OK) { 
                   myMap.setCenter(results[0].geometry.location); 
                   myMap.fitBounds(results[0].geometry.viewport) 
                   var marker = new google.maps.Marker({ 
                       map: myMap, 
                       position: results[0].geometry.location 
                   }); 
               } else { 
                   alert('Geocode was not successful for the following reason: ' + status); 
               } 
           }); 
       } 

       function reCenter() { 
           var currentCenter = myMap.getCenter(); 
           google.maps.event.trigger(myMap, 'resize'); 
           myMap.setCenter(currentCenter); 
       } 


</script> 
</head> 
</html> 

任何人都可以闡明這一些輕?

感謝,

瑞安

回答

0

您可以配置在信息窗口顯示的內容。

this page在Fusion Tables幫助

+0

此幫助頁面似乎適用於顯示在Fusion Tables中的InfoWindow。該InfowWindow根據需要顯示。問題在於InfoWindow在我放置圖層的Google Map上不一樣。 –

0

您必須定義templateId有對信息窗口相同的內容。

一下添加到傳遞給層的選項:

templateId:2 
+0

對不起,但你能詳細一點嗎?我無法在templateID上找到任何文檔。該選項是否添加到FusionTablesLayerOptions或InfoWindowOptions?到FusionTablesLayerOptions的 –

+1

。您會在[這裏]找到一個教程(http://support.google.com/fusiontables/answer/1244603?hl=zh-CN)。要查看當前使用的模板,請轉至https://www.google.com/fusiontables/DataSource?docid=1Bgo94POIxKwQOOltuFbaAW6CpjQqPvYLVSqXuLk,然後選擇「幾何圖形」選項卡。點擊標籤旁邊的小向下箭頭並選擇「發佈」。打開一個窗口,點擊「獲取HTML和Javascript」。你會看到圖層的templateId選項設置爲** 2 ** –

+0

啊,我現在看到了。謝謝一堆。 –

0

我最終改變引用另一個Fusion Tables圖層的代碼。我改變的只是ID。這似乎與新層一起工作,但我仍然不知道在InfoWindow中顯示幾何圖形時發生了什麼。

如果再次發生,我會大多數人嘗試Dr.Molle的建議。