Google maps 如何在Angular2应用程序中嵌入/隔离JS组件（谷歌地图）？
在尝试将Google地图（API v3）小部件嵌入Angular2应用程序时，我发现有一个点击/拖动错误让我感到不安 我想知道是否有一种很好的方法可以嵌入Google地图组件，它与Angular地图是隔离的。根据stacktrace（如下所示），谷歌地图似乎在Zone尝试调用任务后出现了意外情况 简单Plunkr示例（可运行）： 每次错误点击后的回溯（在README.md中）：Google maps 如何在Angular2应用程序中嵌入/隔离JS组件（谷歌地图）？,google-maps,google-maps-api-3,angular,zonejs,Google Maps,Google Maps Api 3,Angular,Zonejs,在尝试将Google地图（API v3）小部件嵌入Angular2应用程序时，我发现有一个点击/拖动错误让我感到不安 我想知道是否有一种很好的方法可以嵌入Google地图组件，它与Angular地图是隔离的。根据stacktrace（如下所示），谷歌地图似乎在Zone尝试调用任务后出现了意外情况 简单Plunkr示例（可运行）： 每次错误点击后的回溯（在README.md中）： - Angular: angular2-polyfills.js:324 Uncaught TypeError: Ca
- 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
<!--
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>
- 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
<!--
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>
角度2快速入门
System.import（'main.js'）。然后（null，console.error.bind（console））；
加载。。。
html，body，#map{
身高：100%；
保证金：0；
填充：0；
}
var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{纬度：-34.397，液化天然气：150.644}，
缩放：8
});
}
从'angular2/platform/browser'导入{bootstrap}；
从'angular2/core'导入{Component}；
//创建角度组件
@组成部分({
选择器：“我的应用程序”，
模板：“我的第一个Angular 2应用程序”
})
导出类AppComponent{}
//引导组件
bootstrap（AppComponent）；
- 每次点击都会触发一个错误
- 错误似乎并不严重，但最好不要在不稳定的基础上继续
- Stacktrace暗示Google Maps（u.r.jl@common.js:244）对Angular2的Zone（ZoneDelegate.invokeTask@Angular2 polyfills.js）调用的任务感到惊讶
- 这个小部件可以在一个简单的应用程序中工作，但会出现角度问题