API góc 2 và google maps. Thao tác đối tượng map `từ thành phần

Question

Tôi sử dụng Angular 2 và tôi cần làm việc với Google Map. Tôi cần khởi tạo bản đồ, tạo một số mảng với tọa độ tuyến đường, thêm Custom HTML Marker, thêm một số người xem sự kiện, vẽ hình đa giác, v.v. Tất cả đều có thể thực hiện chỉ với JS gốc trên trang web. Trong công việc của tôi, tôi cần sử dụng Angular2. Làm thế nào tôi có thể bắt đầu một đối tượng bản đồ bên trong thành phần và thao tác nó trong một thành phần giống như với một đối tượng?

Có thư viện angular2-google-maps nhưng thư viện có chức năng giới hạn. Ví dụ tôi không thể tạo ra một polyline với angular2-google-map, tôi không có thể tích hợp một số thư viện, ví dụ Tuỳ chỉnh HTML Marker, cSnapToRoute vv

Answer 1

Bạn có thể làm cho nó đơn giản script JS mà bạn sẽ tải trên trang mà không cần Góc. Bạn có thể init GMaps như thế này:

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

Và sau đó bạn có thể kích hoạt sự kiện khi GMaps sẽ kết thúc khởi tạo:

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

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

}); 

Và sau đó bạn có thể bắt nó trong góc:

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

Và sau đó bạn có thể sử dụng bình thường, đặt thu phóng ví dụ:

mapData.map.setZoom(50);