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事件。我的理论是，这种惊人的阻止了两个映射在Visualization 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>

Google多个GeoMaps，API

1 个答案: