Angular 2和谷歌地图API.从组件操纵地图`s对象

Question

我使用Angular 2,我需要使用Google Map.我需要初始化一个地图,创建一些带有路线坐标的数组,添加一个自定义HTML标记,添加一些事件监听器,绘制折线等等.所有这些都可以在网页上只使用原生JS.在我的工作中,我需要使用Angular2.我如何在组件内部初始化一个地图对象,并在一个组件内操纵它,就像对象一样？

有一个angular2-google-maps库,但它的功能有限.例如,我无法使用angular2-google-maps创建折线,我无法集成某些库,例如自定义HTML标记,cSnapToRoute等.

Answer 1

您可以制作简单的 JS 脚本，无需 Angular 即可将其加载到页面上。您可以像这样初始化 GMap：

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

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

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