因为它在构建过程中显示错误。
应用程序/页面/测试页面4/测试页面4.ts:27:27中出现错误-错误TS2304:找不到名称'google'。
27这个.地理编码器=新的谷歌.Map.地理编码器; ~~~~~~应用程序/页面/测试页面4/测试页面4.ts:29:32-错误TS2304:找不到名称'google'。
29 const自动完成=新的谷歌Map地点自动完成(这个搜索元素引用本地元素); ~~~~~~应用程序/页面/测试页面4/测试页面4.ts:33:24-错误TS2503:找不到命名空间“pay2000”。
33个常数位置:().~~~~~~
下面是我的代码。
import { Component, OnInit, ElementRef, ViewChild, NgZone } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
@Component({
selector: 'app',
templateUrl: './TestPage4.html',
styleUrls: ['./TestPage4.css']
})
export class TestPage4 implements OnInit {
lat: number;
lng: number;
zoom = 1;
private geoCoder;
@ViewChild('search', { static: false})
public searchElementRef: ElementRef;
constructor(
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone) {}
ngOnInit() {
//load Places Autocomplete
this.mapsAPILoader.load().then(() => {
this.geoCoder = new google.maps.Geocoder;
const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
autocomplete.addListener("place_changed", () => {
this.ngZone.run(() => {
//get the place result
const place: google.maps.places.PlaceResult = autocomplete.getPlace();
console.log(place);
//verify result
if (place.geometry === undefined || place.geometry === null) {
return;
}
for (var i = 0; i < place.address_components.length; i++) {
let addressType = place.address_components[i].types[0];
//if (componentForm[addressType]) {
// var val = place.address_components[i][componentForm[addressType]];
// document.getElementById(addressType).value = val;
//}
// for the country, get the country code (the "short name") also
console.log(addressType);
if (addressType == "country") {
console.log(place.address_components[i].short_name);
console.log(place.address_components[i].long_name);
}
else{
console.log('---others---');
console.log(place.address_components[i].short_name);
console.log(place.address_components[i].long_name);
}
}
//set latitude, longitude and zoom
this.lat = place.geometry.location.lat();
this.lng = place.geometry.location.lng();
this.zoom = 12;
});
});
});
}
}
因为iF12它new google.maps.Geocoder
,并显示我它存在于下面。
但实际上,当构建时,显示上述错误。
- 更新1:**
{
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
"importHelpers": true,
"module": "esnext",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
],
"baseUrl": "src",
"paths": { "@angular/*": ["node_modules/@angular/*"] }
}
}
这是tsconfig. json文件。
- 更新2:**
使用declare var google: any;
适用于this.geoCoder = new google.maps.Geocoder;
和const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
,但在 * google. maps. places. PlaceResult上失败*找不到命名空间"google"const place: google.maps.places.PlaceResult = autocomplete.getPlace();
3条答案
按热度按时间b4lqfgs41#
在tsconfig.app.json中找到了解决方案。
在types中只添加了
"googlemaps"
,它丢失了,错误消失了。不需要添加declare var google: any;
,没有它也会工作得很好。yx2lnoni2#
解决方案是
1.安装网络管理系统i @类型/谷歌Map@3.43.3”
1.转到tsconfig.app.json并将类型设置为“types”:[谷歌Map]
sz81bmfz3#
以下内容适用于我的用例,使用节点16:
已安装Angular GoogleMap模块并键入:
请注意,如果您运行的是更新版本的Node,则可以省略
--legacy-peer-deps
参数。然后,将Google Map类型添加到
tsconfig.app.json
中的"types"
指令:终于能够使用Google Maps class: