如何在 Angular2 應用程序中嵌入/隔離 JS 組件（谷歌地圖）？

Question

在嘗試在 Angular2 應用程序中嵌入 Google Maps (API v3) 小部件時，我發現有一個點擊/拖動錯誤讓我感到不安。

我想知道是否有一種好方法可以嵌入與 Angular 隔離的 Google Map 組件。 根據堆棧跟蹤（如下），在 Zone 嘗試調用任務后，Google 地圖似乎遇到了意外情況。

簡單的 Plunkr 示例（可運行）： https ://plnkr.co/edit/Tg3zwphygrgLUG5mq8Cc

每次錯誤點擊后的回溯（在 README.md 中）：

- Angular: angular2-polyfills.js:324 Uncaught TypeError: Cannot read property 'Ra' of null
- Google Maps: _.r.jl @ common.js:244
- Google Maps: _.J.trigger @ js?key=NICE_TRY_HACKERS&callback=initMap:103
- Google Maps: fx @ common.js:190
- Google Maps: (anonymous function) @ common.js:189
- Google Maps: _.J.trigger @ js?key=NICE_TRY_HACKERS&callback=initMap:103
- Google Maps: _.r.Mm @ common.js:257_.r.Kn @ common.js:231
- Angular: ZoneDelegate.invokeTask @ angular2-polyfills.js:423
- Angular: Zone.runTask @ angular2-polyfills.js:320
- Angular: ZoneTask.invoke @ angular2-polyfills.js:490

HTML (index.html):

        <!--
            Google Maps alongside Angular2
            =======================================
            See README.md
    -->
    <html>
    <head>
            <title>Angular 2 QuickStart</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">

            <!-- 1. (Angular2) Load libraries -->
            <!-- IE required polyfills, in this exact order -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system-polyfills.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2-polyfills.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system.src.js"></script>
            <script src="https://npmcdn.com/rxjs@5.0.0-beta.2/bundles/Rx.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2.min.js"></script>

            <!-- 2. (Angular2) Configure SystemJS -->
            <script>
                    System.import('main.js').then(null, console.error.bind(console));
            </script>

    </head>

    <!-- 3. (Angular2) Display the application -->
    <body>
    <my-app>Loading...</my-app>

    <!-- 4. GOOGLE MAPS START, source: https://developers.google.com/maps/documentation/javascript/tutorial#The_Hello_World_of_Google_Maps_v3-->

            <style>
                    html, body, #map {
                            height: 100%;
                            margin: 0;
                            padding: 0;
                    }
            </style>

            <div id="map"></div> <!-- Google Map goes here -->

            <script>
                    var map;
                    function initMap() {
                            map = new google.maps.Map(document.getElementById('map'), {
                                    center: {lat: -34.397, lng: 150.644},
                                    zoom: 8
                            });
                    }
            </script>

            <script src="https://maps.googleapis.com/maps/api/js?key=NOTHING_TO_SEE_HERE&callback=initMap" async defer></script>

    <!-- GOOGLE MAPS END -->

    </body>
    </html>

Angular2 Bare-Bones 應用程序 (main.ts)

import {bootstrap}    from 'angular2/platform/browser';
import {Component} from 'angular2/core';

// Create Angular component
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

// Bootstrap the component
bootstrap(AppComponent);

觀察：

每次點擊都會觸發一個錯誤
錯誤似乎不嚴重，但最好不要在不穩定的基礎上繼續
Stacktrace 建議谷歌地圖 (_.r.jl @ common.js:244) 對 Angular2 的 Zone (ZoneDelegate.invokeTask @ angular2-polyfills.js) 調用的任務感到驚訝
該小部件在一個簡單的應用程序中工作，但在 Angular 中抱怨

Answer 1

很少有 3rdparty 解決方案提供像https://angular-maps.com/這樣的即用型組件。

如何在 Angular2 應用程序中嵌入/隔離 JS 組件（谷歌地圖）？

問題描述

1 個解決方案

解決方案1
1 已采納 2016-04-18 21:15:35

如何在 Angular2 應用程序中嵌入/隔離 JS 組件（谷歌地圖）？

問題描述

1 個解決方案

解決方案1 1 已采納 2016-04-18 21:15:35

解決方案1
1 已采納 2016-04-18 21:15:35