谷歌多个地理地图，API

Question

如何使用多个GeoMaps
如果我只有一个映射，一切都可以。如果我尝试添加另一个，而不再次加载geomap可视化，则该映射不会加载，如果我尝试加载它们，则会出现错误：Uncaught TypeError: Object #<Object> has no method 'Load'两个映射的函数名称相同，如果我更改第二个映射的功能名称，则我必须更改回调

google.setOnLoadCallback(drawMap);

但是，如果我这样做，我会收到上面发布的错误。。。。

更多代码：

    //first map
  <script type="text/javascript">
   google.load("visualization", "1", {"packages": ["geomap"]});
   google.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = new google.visualization.DataTable();
      data.addRows(16);
      data.addColumn("string", "City");
      data.addColumn("number", "Numar anunturi");        
         data.setValue(1, 0, 'Ilfov');
        data.setValue(1, 1, 6);

      var options = {width: 800,height:400};
      options["region"] = "RO";
      options["colors"] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options["dataMode"] = "markers";

      var container = document.getElementById("map_chart_div");
      var geomap = new google.visualization.GeoMap(container);
          geomap.draw(data, options);
    }
    </script> 
        //second map
    <script type="text/javascript">     
    function drawMap() {
      var data = new google.visualization.DataTable();
      data.addRows(16);
      data.addColumn("string", "City");
      data.addColumn("string", "pret/mp:");
         data.setValue(0, 0, 'Ilfov');
        data.setValue(0, 1, '50.44');    

      var options = {width: 800,height:400};
      options["region"] = "RO";
      options["colors"] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options["dataMode"] = "markers";       
      var container = document.getElementById("map_pret_div");
      var geomap = new google.visualization.GeoMap(container);    
      geomap.draw(data, options);
    }
    </script>

Answer 1

我如下修改了您的代码，现在它似乎可以工作了，尽管您必须耐心等待第二个映射的加载。在启动第二张地图之前，我正在听第一张地图上的drawingDone事件。我的理论是，这种交错防止了这两个地图在可视化API内部踩到彼此的数据结构。但即使我对原因的看法是错误的，这至少是有效的。

我的零钱需要整理一下。很抱歉。我有点赶时间，但我想在跑去做其他事情之前把工作代码给你。

<script type="text/javascript">
google.load("visualization", "1", {"packages": ["geomap"],"callback": "drawMaps"});
function drawMaps() {
    drawMap1();
}
function drawMap1() {
  var data = new google.visualization.DataTable();
  data.addRows(16);
  data.addColumn("string", "City");
  data.addColumn("number", "Numar anunturi");        
     data.setValue(1, 0, 'Ilfov');
    data.setValue(1, 1, 6);

  var options = {width: 800,height:400};
  options["region"] = "RO";
  options["colors"] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
  options["dataMode"] = "markers";

  var container = document.getElementById("map_chart_div");
  var geomap = new google.visualization.GeoMap(container);
  geomap.draw(data, options);
  google.visualization.events.addListener(geomap, 'drawingDone', drawMap2);
}
function drawMap2() {
  var data = new google.visualization.DataTable();
  data.addRows(16);
  data.addColumn("string", "City");
  data.addColumn("string", "pret/mp:");
     data.setValue(0, 0, 'Ilfov');
    data.setValue(0, 1, '50.44');    

  var options = {width: 800,height:400};
  options["region"] = "RO";
  options["colors"] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
  options["dataMode"] = "markers";       
  var container = document.getElementById("map_pret_div");
  var geomap2 = new google.visualization.GeoMap(container);    
  geomap2.draw(data, options);
}
</script>