Interfejs API map Angular 2 i google. Manipuluj obiektem mapy ze składnika

Question

Używam Angular 2 i muszę pracować z Mapą Google. Muszę zainicjować mapę, utworzyć kilka tablic ze współrzędnymi trasy, dodać Custom HTML Marker, dodać kilka listenerów zdarzeń, narysować polilinię itd. Wszystkie te elementy można wykonać za pomocą natywnego JS na stronie internetowej. W mojej pracy muszę używać Angular2. Jak mogę zainicjować obiekt mapy wewnątrz komponentu i manipulować nim w komponencie takim jak obiekt?

Istnieje biblioteka angular2-google-maps, ale ma ona ograniczoną funkcjonalność. Na przykład nie można utworzyć polilinię z angular2-google-map, nie mogę zintegrować kilka bibliotek, na przykład Niestandardowe HTML Marker, cSnapToRoute itp

Answer 1

Można zrobić to prosty skrypt JS które załadujesz na stronie bez Angulara. Można init, GMaps tak:

var mapData; 
    container.gmap(
    { 
     'zoomControl': true, 
     'zoomControlOptions': { 
      'style': google.maps.ZoomControlStyle.SMALL, 
      'position': google.maps.ControlPosition[ options.mapZoomPosition ] 
     }, 
     'panControl': false, 
     'streetViewControl': false, 
     'mapTypeControl': false, 
     'overviewMapControl': false, 
     'scrollwheel': false, 
     'draggable': options.draggable, 
     'mapTypeId': google.maps.MapTypeId[ options.mapType ], 
     'zoom': options.mapZoom, 
     'styles': styles[ options.mapStyle ] 
    }) 
    .bind('init', function() { 

     mapData = { 
      container: container, 
      map: map, 
      options: options, 
      addMarker: addMarker, 
      library: library, 
      iw: { 
       data: infoWindowData, 
       window: infoWindow, 
       content: infoWindowContent, 
       open: infoWindowOpen, 
       close: infoWindowClose 
      } 
     }; 
} 

a następnie można wywołać zdarzenie, kiedy GMaps zakończy inicjalizacji:

google.maps.event.addListenerOnce(map, 'idle', function() { 

$(document).trigger('map.init', mapData); 

}); 

a następnie można go złapać w kątowa:

var mapData; 
$(document).on('map.init', function (event,data) { 
    mapData = data; 
}); 

A następnie możesz go normalnie używać, ustawiając zoom na przykład:

mapData.map.setZoom(50);