融合表层信息窗口显示几何字段中的所有顶点答案

【问题标题】：Fusion Table layer InfoWindow showing all vertices in geometry field融合表层信息窗口显示几何字段中的所有顶点
【发布时间】：2013-01-22 21:50:37
【问题描述】：

这是我在这里的第一篇文章，如果我犯了新手失礼，我深表歉意。

我在地图顶部有一个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>

有人能解释一下吗？

谢谢，

瑞恩

【问题讨论】：

标签： javascript google-maps google-fusion-tables

【解决方案1】：

您可以配置信息窗口中显示的内容。

请参阅 Fusion Tables 帮助中的 this page

【讨论】：

此帮助页面似乎适用于 Fusion Tables 中显示的信息窗口。该 InfowWindow 将根据需要显示。问题是我放置图层的 Google 地图上的 InfoWindow 不一样。

【解决方案2】：

您必须将templateId 定义为具有与 infoWindow 相同的内容。

将此添加到传递给图层的选项中：

templateId:2

【讨论】：

抱歉，您能详细说明一下吗？我找不到关于 templateID 的任何文档。该选项是添加到 FusionTablesLayerOptions 还是 InfoWindowOptions 中？
到 FusionTablesLayerOptions。你会发现一个教程here。要查看当前使用的模板，请转到google.com/fusiontables/… 并选择选项卡“几何图”。单击标签旁边的小向下箭头，然后选择“发布”。将打开一个窗口，在此处单击“获取 HTML 和 Javascript”。您会看到图层的 templateId-option 设置为 2
啊，我现在明白了。非常感谢。

【解决方案3】：

我最终更改了代码以引用另一个融合表层。我改变的只是ID。这似乎适用于新图层，但我仍然不知道在 InfoWindow 中显示几何图形时发生了什么。

如果它再次发生，我很可能会尝试 Dr.Molle 的建议。

【讨论】：