Question

到目前为止，我有这个：

<div class="map col-xs-12">
          <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">

            <sebm-map-polygon [paths]="paths"></sebm-map-polygon>

          </sebm-google-map>
</div>

它在地图上给我一个方形多边形。但我们的想法是拥有一个可点击国家的地图（也就是说，每个国家/地区点击都会触发一个事件并返回一些数据）。

我刚开始使用sebm谷歌地图用于Angular 2，但似乎文档在某些方面缺乏细节。

我是Angular的新手并且不确定如何处理这个问题。您是否建议将sebm-map-polygon与所有国家/地区的geojson数据一起使用？

很抱歉，我知道这是一个普遍的问题，但在Angular 2的背景下可能很有价值。

Answer 1

尝试使用Visualization: GeoChart

地理标志是一个国家，大陆或地区的地图，其中的区域以三种方式之一确定：


区域模式为整个区域（如国家/地区，省或州）着色。

标记模式使用圆圈指定根据您指定的值缩放的区域。

文字模式标记带有标识符的区域（例如，＆＃34;俄罗斯＆＃34;或＆＃34;亚洲＆＃34;）。   使用SVG或VML在浏览器中呈现地理标记。请注意，geochart不可滚动或可拖动，它是一个线条图而不是地形图;如果您想要其中任何一项，请考虑使用map visualization。

以下是示例代码：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['geochart']});
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

您还可以检查以下代码实现：

希望这有帮助。

如何在Angular 2中制作可点击国家/地区的地图？

1 个答案: