打字稿错误 找不到名称"谷歌"

Question

如果我将文件保存两次，但不知道为什么 谷歌地图

ngOnInit(){
this.initMap();
}
initMap(){
let coords = new google.maps.LatLng(37.992667,-1.1146491);
let mapOptions: google.maps.MapOtpions= {
center: coords,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement,
mapOptions)

}

}

这是错误代码...

Typescript: C:/ionic/restaurante/IESAljada/src/components/google-map/google-map.ts, line: 22
L21:  initMap(){
L22:      let coords = new google.maps.LatLng(37.992667,-1.1146491);
L23:      let mapOptions: google.maps.MapOtpions= {

Answer 1

google.maps.MapOtpions看起来像一个错字。你是说google.maps.MapOptions？

Answer 2

试试这个基本的例子。宣

声明 var 谷歌;

在您的打字稿文件中。如下所示：

declare var google;
@Component( {
selector: 'page-example',
templateUrl: 'example.html'
} )
export class GoogleMapExample {
@ViewChild( 'map' ) mapElement: ElementRef;
map: any;
private defaultLat = 56.1304;
private defaultLng = 106.3468;
ionViewDidLoad() {
this.loadMap();
}
private loadMap = () =>{
let latLng = new google.maps.LatLng( this.defaultLat, this.defaultLng );
console.log("latLng====>",latLng);
let mapOptions = {
center: latLng,
zoom: 15,
disableDefaultUI: true
}
this.map = new google.maps.Map( this.mapElement.nativeElement, mapOptions );
}
}

HTML将是：<div #map id="map"></div>

Answer 3

请尝试官方文档中的示例代码

https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/README.md

安装

$> ionic cordova plugin add cordova-plugin-googlemaps 
--variable API_KEY_FOR_ANDROID="(API_KEY_FOR_ANDROID)" 
--variable API_KEY_FOR_IOS="(API_KEY_FOR_IOS)"
$> npm install --save @ionic-native/core@latest @ionic-native/google-maps@latest

法典

import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapOptions,
CameraPosition,
MarkerOptions,
Marker
} from '@ionic-native/google-maps';
import { Component } from "@angular/core/";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
map: GoogleMap;
constructor() { }
ionViewDidLoad() {
this.loadMap();
}
loadMap() {
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: 43.0741904,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
};
this.map = GoogleMaps.create('map_canvas', mapOptions);
let marker: Marker = this.map.addMarkerSync({
title: 'Ionic',
icon: 'blue',
animation: 'DROP',
position: {
lat: 43.0741904,
lng: -89.3809802
}
});
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
alert('clicked');
});
}
}