Angular 2 和谷歌地图 API。从组件操作地图的对象答案

【问题标题】：Angular 2 and google maps API. Manipulate map`s object from componentAngular 2 和谷歌地图 API。从组件操作地图的对象
【发布时间】：2016-03-09 09:55:40
【问题描述】：

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

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

【问题讨论】：

标签： javascript google-maps angular

【解决方案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
            }
        };
}

然后您可以在 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);

【讨论】：

我使用 Angular 版本。 2 我使用组件。你能告诉我一段代码如何在组件中使用 GMap 对象吗？
你不能在没有 hack 的情况下使用它。我看到的最佳方法是：您需要创建纯 JS 脚本并将其加载到页面中，就像在 Google 的示例中一样。初始化 Map 后，您需要从此 JS 脚本触发事件并传递 mapObject 并使用 JQuery 以角度处理它。然后在角度使用这个 mapObject，不管 1 还是 2。