0

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

我在地图顶部有一个Google Fusion Table 图层。我通过导入 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>

任何人都可以对此有所了解吗?

谢谢,

瑞安

4

3 回答 3

0

您必须templateId为 infoWindow 定义相同的内容。

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

templateId:2
于 2013-01-23T01:26:43.580 回答
0

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

请参阅Fusion Tables 帮助中的此页面

于 2013-01-22T22:20:00.633 回答
0

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

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

于 2013-01-23T20:36:22.583 回答