可视化数据网页开发Google Charts（十三）:地图

最新推荐文章于 2024-08-25 10:01:48 发布

Lzs1998

最新推荐文章于 2024-08-25 10:01:48 发布

阅读量891

点赞数 3

文章标签： google charts 数据可视化地图

本文详细介绍了如何利用Google Charts库制作交互式地图，实现数据在地图上的直观展示，适合数据可视化和Web开发爱好者学习。

摘要由CSDN通过智能技术生成

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {
        "packages":["map"],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        "mapsApiKey": "AIzaSyAvnS1PO1CiGX9Xb85x-y3F_inQqBi1_uA"
    });
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [37.4232, -122.0853, 'Work'],
          [37.4289, -122.1697, 'University'],
          [37.6153, -122.3900, 'Airport'],
          [37.4422, -122.1731, 'Shopping']
        ]);

        var map = new google.visualization.Map(document.getElementById('map_div'));
        map.draw(data, {
          showTooltip: true,
          showInfoWindow: true
        });
      }

    </script>
  </head>

  <body>
    <div id="map_div" style="width: 400px; height: 300px"></div>
  </body>
</html>