Question

如果我将文件保存两次，但不知道原因 google.maps.ts

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 google;

你的打字稿文件中的

。如下：

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

请尝试使用official文档中的示例代码

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');
    });
  }
}

打字稿错误找不到名称'google'

3 个答案: