Fatal编程技术网
  • javascript/
  • Javascript 一个页面上有多个谷歌地图——一次只能加载一个

Javascript 一个页面上有多个谷歌地图——一次只能加载一个

javascript html r

Javascript 一个页面上有多个谷歌地图——一次只能加载一个,javascript,html,r,Javascript,Html,R,我对HTML和Javascript非常陌生（不到一周的经验），我陷入了以下情况。我使用googleVis R包创建了6个google地图可视化（简单的东西——只是地图上的标记）。我从R中的googleVis对象中提取了Javascript，并将它们包含在一个简单的站点中，该站点包含6个div，分别对应于6个不同的地图 每个Javascript文件包括一个创建JSON对象的函数、一个绘制地图的函数和一个显示地图的函数： //define JSON function gvisDataWest

我对HTML和Javascript非常陌生（不到一周的经验），我陷入了以下情况。我使用googleVis R包创建了6个google地图可视化（简单的东西——只是地图上的标记）。我从R中的googleVis对象中提取了Javascript，并将它们包含在一个简单的站点中，该站点包含6个div，分别对应于6个不同的地图

每个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);
}

//定义JSON
函数gvisDataWest（）
{
var data=new google.visualization.DataTable（）；
var datajson=
[
[
33.5313,
-112.1774,
“2005-2009年贫困率：40.7%
2000年贫困率：34.3%
显著性差异：0.0分”
],
…许多行数据。。。
];
data.addColumn（'number'，'Latitude'）；
data.addColumn（'number'，'Longitude'）；
data.addColumn（'string'，'tip'）；
data.addRows（datajson）；
返回（数据）；
}
//绘制图表
函数drawChartWest（）{
var data=gvisDataWest（）；
var选项={}；
选项[“showTip”]=true；
选项[“enableScrollWheel”]=true；
选项[“宽度”]=400；
var chart=new google.visualization.Map(
document.getElementById（'West'）
);
图表绘制（数据、选项）；
}
//显示图表
函数displayChartWest（）
{
load（“可视化”，“1”，“{packages:[“map”]}）；
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>


…一堆div、header、等。。。
…然后是这样的六个div，每个div都有一个合适的id：
西方

displayChartWest（）
中西部地区

显示图表中西部（）
问题是：按照我目前拼凑这个站点的方式，如果在站点的任何地方调用了两个dsplayChart**（）函数（如本例中的displayChartWest（）和displayChartMidwest（）），则所有div都将显示为空。但是，如果我只包含其中一个函数调用，那么映射在相应的div中显示良好。不知何故，调用两个或多个函数会导致冲突，尽管我不知道为什么。非常感谢你的帮助。干杯，AR

我想您可能需要等到DOM加载完毕后再启动图表。如果不使用jQuery之类的库，您可以使用body onload事件来完成：

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


…页面源。。。
函数displayCharts（）{
displayChartWest（）；
显示图表中西部（）；
}
不要这样做：

google.load("visualization", "1", { packages:["map"] }); 
google.setOnLoadCallback(drawChartWest);
请尝试以下方法：

google.load("visualization", "1", { packages:["map"],callback: drawChartWest});
我原以为可能是这样的，但当我尝试在body标记或window.onload中使用onload，甚至包括jQuery并使用$（document）.ready（）之类的东西时，我遇到了相同的结果。我尝试在另一台机器上加载它，能够加载三个贴图，但添加了第四个贴图（或者对displayChart****（）函数的第四次调用）破坏了该网站。我有限的理解让我思考了订购地图的方法，但我不确定该转向何处……嗯，将每个地图放在单独的
iframe
中如何？