个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
25
4
我已经努力了几个小时，试图在我使用 Angular-cli 的 Angular 2 项目中使用 googlemaps PlaceResult。
我必须使用@types 安装 googlemaps 并将其添加到我的 tsconfig.json 配置文件的 "types" 属性下。
{
...
"types": [
"google-maps"
]
}
}
我通过简单地导入它，成功地在我的 Angular 2 组件中使用了 google.maps.places.PlaceResult!
import { ActivatedRoute, Params } from "@angular/router";
import { MapsAPILoader } from "angular2-google-maps/core";
import PlaceResult = google.maps.places.PlaceResult;
import GeocoderRequest = google.maps.GeocoderRequest;
...
几个小时后，我不得不使用 google.maps.Marker，它与 PlaceResult 和 GeocoderRequest 在同一个定义文件中.所以我简单地将其导入如下:
[Line 12] import PlaceResult = google.maps.places.PlaceResult;
[Line 13] import GeocoderRequest = google.maps.GeocoderRequest;
[Line 14] import Marker = google.maps.Marker;
[Line 15] import LatLng = google.maps.LatLng;
...
但是我在运行时遇到了一个意想不到的错误
Uncaught ReferenceError: google is not defined search.component.ts:14
at Object.444 (search.component.ts:14)
at __webpack_require__ (bootstrap 26c2b97…:52)
at Object.727 (app.config.ts:11)
at __webpack_require__ (bootstrap 26c2b97…:52)
at Object.602 (src async:7)
at __webpack_require__ (bootstrap 26c2b97…:52)
at Object.1258 (.*$:7)
at __webpack_require__ (bootstrap 26c2b97…:52)
at webpackJsonpCallback (bootstrap 26c2b97…:23)
at main.bundle.js:1
请注意，webpack 在我的组件的第 14 行 抛出此错误。这意味着(如果我错了请纠正我)前面几行(使用相同的“google”)运行良好。
我错过了什么吗？
我用:
最佳答案
关于导入 LatLngBounds = google.maps.LatLngBounds; 我发现我在 Maps api 初始化之前调用了 custructor (new LatLngBounds())。事实上，我正在使用 @agm/core;。并且必须在 load() 之后调用构造函数，如下所示
ngOnInit() {
this.mapsAPILoader.load().then(() => {
this.page$.subscribe(page => {
if (page && page.content) {
this.latLngBounds = new google.maps.LatLngBounds();
page.content.forEach(w => this.latLngBounds.extend(new google.maps.LatLng(lat, lng)));
}
});
}
);
}
我在 typings.d.ts 中添加了以下导入
import {} from '@types/googlemaps';
我通过以下配置解决了我的问题:
1- package.json
"dependencies": {
...
"googlemaps": "^1.12.0",
...
}
2- tsconfig.json
"types": [
...
"googlemaps"
]
3- 并在我的 index.html
中添加 google api 脚本<head>
...
</head>
<body>
<app-root>Loading...</app-root>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&language=fr" async defer></script>
</body>
</html>
4- 在组件中，像下面这样使用它
declare var google: any;
@Component({
...
})
export class SearchComponent implements OnInit, AfterViewInit {
// Google Maps
bounds: google.maps.LatLngBounds;
markers: google.maps.Marker[];
infoWindow: google.maps.InfoWindow;
}
关于google-maps - Angular 2( Angular cli): Uncaught ReferenceError: google is not defined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42348817/
25
4
0
你好我是 Angular JS 的初学者，当我开始创建模块和 Controller 时，我无法打印我的消息，下面是我的代码 var myModule = angular.module("myFirst
我对 JQuery 还是个新手，我正在尝试使用它遍历 JSON 数组并使用数组中的数据更新我的网页。 JSON 文件如下所示: [ { "firstname":"John",
我正在使用 AngularJS 1.3.5，我正在尝试从 json 文件中获取信息。这是我的代码:HTML 文件: {{da
我正在创建 Bootstrap 模板。我收到两个错误，我不知道自己做错了什么。当我搜索类似的问题时，似乎是脚本错乱了，但我认为它们的位置是正确的。 两个错误: 未捕获的 ReferenceError:
我试图用子菜单制作导航栏，但我一直收到 dropMenu 未定义，当我将鼠标悬停在两个巴黎链接上时，我收到 Uncaught TypeError: Cannot read property 'styl
我正在尝试在名为 UserComponent 的 Angular 组件上运行 karma 测试。在此组件中，我有一个 ngOnInit 执行此操作: ngOnInit() { const
当我启用 login.spec.ts 测试时，对于不同的测试，我总是随机收到此错误。未捕获错误:未捕获( promise ):错误:无法匹配任何路由。 URL 段:“注销” 我尝试使用以下方法伪造 a
自从我设置一个与 Angular 一起运行的网络应用程序以来已经有一段时间了。我正在通过一个旧项目回顾我的步骤(尝试在我正在做的页面上实现一个 Controller ，确保 Controller 文件
在 AWS Elastic Beanstalk 上部署应用程序后会发生此错误。构建和部署成功，所有模块都正常工作，除了一个显示上述 super 表达式错误的模块。一切似乎都在本地机器上正常工作，甚至可
我刚刚开始使用 Node.js 并尝试使用模块。我已经安装了 Node 和 npm，并确保一切顺利。我将在下面添加代码来向您展示我得到了什么。 我有两个 js 文件，它们在这里。 app.js: va
在 Android 4.4.2 KitKat (API 19) 模拟器上运行时，我的代码出现问题... 当我在 Android 4.3 (API 18) 模拟器上模拟我的项目时，它正常工作并使用 Ma
function more(){ var MoreDetails = document.getElementById('MoreDetails'); More
我正在练习 Javascript，并且有以下代码，该代码在 sets[i][j] = initial_sets [i ][j]; 行。这个想法似乎是正确的，但我不明白为什么会出现错误。 var set
$(document).ready(function(){ $('#name').val('Name1'); }); function clickMe(){ console.lo
我正在创建一个网络应用程序，但我遇到了一个无法解决的简单问题。我已将产生问题的代码放在这里:http://jsfiddle.net/rkumarnirmal/5w3FG/ 应该显示此答案的第二个ale
我正在执行一项长时间运行的任务，在中间的某个位置，可能会抛出此异常: Uncaught DOMException: Blocked a frame with origin "http://localh
我试图通过使用 HTML5 中的 onEnded 属性一首接一首地播放 3 首歌曲。这是我的第一次尝试，但出现错误。 错误: Uncaught ReferenceError: src is not d
检查 Fiddle 以查看发生的故障。 当我将数据(即使我将其留空)添加到文本框并尝试单击“添加”时，它没有执行任何操作。 打开 Chrome 和 Firefox 控制台都给我同样的错误，它说“cha
这个问题在这里已经有了答案: How to access the correct `this` inside a callback (13 个回答) 关闭5年前。 您好，这是我的(快捷方式)示例代码:
我正在处理一个项目，每次 Node 运行我的代码时，浏览器控制台都会给我这个: Uncaught TypeError: Failed to resolve module specifier "expr
我是一名优秀的程序员,十分优秀！