javascript - Angular 2 和谷歌地图 API。从组件操作 map 的对象

Question

我使用 Angular 2，我需要使用 Google Map。我需要初始化 map ，创建一些带有路线坐标的数组，添加一个 Custom HTML Marker ，添加一些事件监听器，绘制多段线等。所有这些都可以在网页上使用原生 JS 实现。在我的工作中我需要使用 Angular2。我如何在组件内初始化 map 对象并在组件内像使用对象一样操作它？

有一个angular2-google-maps库，但它的功能有限。例如，我无法使用 angular2-google-maps 创建折线，我无法集成某些库，例如 Custom HTML Marker、cSnapToRoute等

Answer 1

您可以制作简单的 JS 脚本，在没有 Angular 的情况下将其加载到页面上。您可以像这样初始化 GMaps:

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

然后您可以在 GMaps 完成初始化时触发事件:

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

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

});

然后你可以在 Angular 中捕获它:

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

然后就可以正常使用了，比如设置缩放:

mapData.map.setZoom(50);