1

我正在尝试制作并排的 Google Fusion Map，虽然这似乎工作正常，但当我单击多边形时，信息窗口显示为空白。

我试图弄清楚为什么它可能没有从表格中提取和显示信息，而其余数据似乎正在显示。

地图在这里：http ://clairemiller.net/blaenaupop.html

我用来显示的代码是：

<!DOCTYPE html>
<html>
<head>
<style>
 #map_canvas { width: 335px; height: 400px; float: left}
 #map_canvas2 { width: 335px; height: 400px; }
 #image {float: bottom}

body { margin: 0px}
p {color: white; font-family: arial;  font-size: 12px; margin: 0px; position: relative;         left: 4px; top: 3px  }
 #left { width: 335px; height: 20px; float: left; background-color: #007A8F}
 #right { width: 335px; height: 20px; float: left; background-color: #005F70}
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    </script>

<script type="text/javascript">
var map;

var layer;
var layer2;
var secondMapMove = false;
var secondMapBounds = false;

function initialize() {

 map = new google.maps.Map(document.getElementById('map_canvas'), {
  center: new google.maps.LatLng(51.787578, -3.204393),
  zoom: 12,
  mapTypeId: 'roadmap'
});

var layer = new google.maps.FusionTablesLayer({
  center: new google.maps.LatLng(51.5021181, -3.17909),
  query: {
    select: 'geometry',
    from: '1F3SbppvMyF-3lcT5zrYS8S1X8JD1G2-0aQkWLPw',
 }
});
layer.setMap(map);

  map2 = new google.maps.Map(document.getElementById('map_canvas2'), {
   zoom: 12,
   mapTypeId: 'roadmap'
 });

var layer2 = new google.maps.FusionTablesLayer({
   center: new google.maps.LatLng(53.13359,-1.955566),
  query: {
    select: 'geometry',
    from: '1Hf9Z80JTCiq-zWwhhSPrbifO7q9dvA_DP_BN8IY',
 }
});
layer2.setMap(map2);

     google.maps.event.addListener(map,'zoom_changed',function(){
        if(secondMapBounds!=true) {
            var tmpZoom = map.getZoom();
            map2.setZoom(tmpZoom);  
        } else {
            secondMapBounds = false;
    }
 });
 google.maps.event.addListener(map2,'zoom_changed',function(){
    secondMapBounds = true;
    var tmpZoom1 = map2.getZoom();
    map.setZoom(tmpZoom1);
 });
 google.maps.event.addListener(map,'bounds_changed',function(){
    if(secondMapMove!=true) {
        var tmpBounds = map.getCenter();
        map2.setCenter(tmpBounds);
    } else {
        secondMapMove=false;
    }
 });
 google.maps.event.addListener(map2,'bounds_changed',function(){
    secondMapMove = true
    var tmpBounds2 = map2.getCenter();
    map.setCenter(tmpBounds2);
 });

}
</script>

</head>
<body onload="initialize();">

<div class="mapMap" id="map_canvas"></div>
<div class="mapMap" id="map_canvas2"></div>
</body>
</html>

这两个表的 ID 在那里，信息窗口似乎在它们上显示得很好。

我想知道我错过了什么导致信息窗口显示为空白。

4

1 回答 1

3

它不显示空白，它显示白色。

infoWindows 的内容在 -elements 内，infoWindows<p/>的背景是白色的，这是你的 CSS：

p {color: white;/*......*/}

改变颜色

.googft-info-window p{color:#000;}
于 2013-01-28T22:23:16.447 回答