Question

我是HTML和Javascript的新手（不到一周的经验），我遇到了以下情况。我使用googleVis包为R创建了6个谷歌地图可视化（简单的东西 - 只是地图上的标记）。我从R中的googleVis对象中提取了Javascript，并将它们包含在一个简单的网站中，该网站包含6个不同地图中每个地图的6个div。

每个Javascript文件都包含一个创建JSON对象的函数，一个绘制地图的函数以及一个显示地图的函数：

//define JSON    
function gvisDataWest ()
        {
          var data = new google.visualization.DataTable();
          var datajson =
        [
         [
             33.5313,
          -112.1774,
        "<p>2005-2009 Poverty Rate: 40.7%</p> <p>2000 Poverty Rate: 34.3%</p> <p>Significant difference: 0.0 points </p>" 
        ],
        ... many rows of data ...
    ];
    data.addColumn('number','Latitude');
    data.addColumn('number','Longitude');
    data.addColumn('string','tip');
    data.addRows(datajson);
    return(data);
    }

//draw chart
function drawChartWest() {
  var data = gvisDataWest();
  var options = {};
options["showTip"] = true;
options["enableScrollWheel"] = true;
options["width"] =    400;

     var chart = new google.visualization.Map(
       document.getElementById('West')
     );
     chart.draw(data,options);
}

//display chart
function displayChartWest()
{
  google.load("visualization", "1", { packages:["map"] }); 
  google.setOnLoadCallback(drawChartWest);
}

每个javascript文件都包含该国家不同地区的功能和数据（例如，gvisDataMidwest（），givsDataSouthEast（）等定义。）

这大致是我的HTML的样子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta content="text/xml; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=8" /> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script src="../povscripts/map1.js" type="text/javascript"></script>
    <script src="../povscripts/map2.js" type="text/javascript"></script>
    <script src="../povscripts/map3.js" type="text/javascript"></script>
    <script src="../povscripts/map4.js" type="text/javascript"></script>
    <script src="../povscripts/map5.js" type="text/javascript"></script>
    <script src="../povscripts/map6.js" type="text/javascript"></script>
   </head>
   <body>
      ...a bunch of divs, headers, <p>'s, etc...
      ...then six divs like this, each with an appropriate id:
        <div class="anncdiv"> 
            <div class="bannertitle">
                <p class="btxt">West</p>
            </div>
            <div class="anncdivIn" id="West">
            <script type="text/javascript"> displayChartWest() </script>
            </div>
        </div>
    <div class="anncdiv"> 
        <div class="bannertitle">
            <p class="btxt">Midwest</p>
        </div>
        <div class="anncdivIn" id="Midwest">
        <script type="text/javascript"> displayChartMidwest() </script>
        </div>
    </div>

问题：我现在将这个网站拼凑在一起的方式，如果有两个dsplayChart * * （）函数在网站的任何地方被调用（如本例所示，使用displayChartWest（）和displayChartMidwest（））所有div显示为空白。但是，如果我只是包含其中一个函数调用，那么地图在相应的div中显示正常。以某种方式调用这些函数中的两个或更多会导致冲突，但我只是不知道为什么。非常感谢您的帮助。干杯，AR

Answer 1

我认为您可能需要等到DOM加载后再启动图表。不使用像jQuery这样的库，你可以使用body onload事件来完成它：

<body onload="displayCharts()">
...page source...
<script type="text/javascript">
    function displayCharts() {
        displayChartWest();
        displayChartMidwest();
    }
</script>
</body>

Answer 2

而不是这样做：

google.load("visualization", "1", { packages:["map"] }); 
google.setOnLoadCallback(drawChartWest);

试试这个：

google.load("visualization", "1", { packages:["map"],callback: drawChartWest});

单个页面上的多个谷歌地图 - 一次只能加载一个

2 个答案: