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

Question

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

uni*_*fer 5 google-maps geocoding google-maps-api-3 typescript angular

到目前为止，我有这个：

<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>

Run Code Online (Sandbox Code Playgroud)

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

我刚刚开始使用 Angular 2 的 sebm 谷歌地图，但似乎文档有点缺乏细节。

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

抱歉，我知道这是一个一般性问题，但认为它在 Angular 2 的上下文中可能很有价值。

Answer 1

Mr.*_*bot 6

尝试使用可视化：GeoChart

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

该区域模式全色彩的地区，如国家，省或州。

该标记模式使用界于根据您指定的值缩放候区。

在文本模式标签与标识的区域（例如，“俄罗斯”或“亚洲”）。地理图表使用SVG或VML在浏览器中呈现。请注意，geochart 不可滚动或可拖动，它是线图而不是地形图；如果您想要其中任何一个，请考虑使用地图可视化。

这是示例代码：

<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>

Run Code Online (Sandbox Code Playgroud)

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

希望这可以帮助。

归档时间：	9 年，2 月前
查看次数：	9693 次
最近记录：	9 年，1 月前