Hasta ahora tengo esto:
<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>Me da un polígono cuadrado en el mapa. Pero la idea es tener un mapa con países en los que se pueda hacer clic (es decir, cada clic en un país activará un evento y devolverá algunos datos).
Acabo de comenzar a usar el mapa de Google de sebm para Angular 2, pero parece que la documentación carece de detalles.
Soy nuevo en Angular y no estoy seguro de cómo abordar esto. ¿Recomendaría usar sebm-map-polygon con los datos geojson para todos los países?
Lo siento, sé que esta es una pregunta general, pero imagino que podría ser valiosa en el contexto de Angular 2.
Intente usar Visualización: GeoChart
Un geochart es un mapa de un país, un continente o una región con áreas identificadas en una de tres maneras:
- El modo de región colorea regiones enteras, como países, provincias o estados.
- El modo de marcadores utiliza círculos para designar regiones que se escalan según un valor que especifique.
- El modo de texto etiqueta las regiones con identificadores (p. ej., "Rusia" o "Asia"). Un geochart se representa dentro del navegador utilizando SVG o VML . Tenga en cuenta que el geochart no se puede desplazar ni arrastrar, y es un dibujo lineal en lugar de un mapa del terreno; si desea algo de eso, considere una visualización de mapa en su lugar.
Aquí está el código de ejemplo:
<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>También puede verificar lo siguiente para la implementación del código:
Espero que esto ayude.