如何在Angular 2中使用可點擊的國家制作地圖？

到目前爲止，我有這樣的：如何在Angular 2中使用可點擊的國家制作地圖？

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

它讓我在地圖上的方形多邊形。但想法是要有可點擊國家/地區的地圖（即每個國家/地區的點擊都會觸發事件並返回一些數據）。

我剛開始使用Angular 2的sebm谷歌地圖，但它看起來像文件有點缺乏細節。

我是Angular的新手，不確定如何處理此問題。你會推薦使用sebm-map-polygon和所有國家的geojson數據嗎？

對不起，我知道這是一個普遍的問題，但算起來可能是在角2

來源

2017-04-02 universesurfer

上下文有價值的嘗試使用Visualization: GeoChart

一個geochart地圖是一個國家的，一個大陸，或在以下三種方式之一確定區域的區域：

的區域模式顏色整個地區，如國家，省或州。

標記模式使用圓圈指定根據您指定的值縮放的區域。

文本模式標記帶有標識符（例如「俄羅斯」或「亞洲」）的區域。在瀏覽器中使用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>

你也可以檢查代碼實現如下：

希望這有助於。

來源

2017-04-05 16:04:23

非常感謝，這真的很有幫助。會'採取一個裂縫。 – universesurfer

如何在Angular 2中使用可點擊的國家制作地圖？

回答

相關問題