Ionic 3集成Google Maps API报错：无法解析GoogleMap参数

Hey there, let's fix that "Can't resolve all parameters for GoogleMap: (?, ?)" error you're hitting with Ionic 3 and Google Maps. I've seen this exact issue a bunch of times, and it comes down to a couple of small misconfigurations in your code.

Core Issues Identified #

• You're trying to inject GoogleMap directly by adding it to your app.module.ts providers, but GoogleMap isn't an injectable service—it's a class you get from calling GoogleMaps.create().
• There's a duplicate map variable definition in your AddprojectPage class.
• The map container ID you're passing to googleMaps.create() doesn't match the actual element in your template.

Step-by-Step Fixes #

1. Clean Up app.module.ts #

Remove GoogleMap from your providers array—you only need to provide GoogleMaps here:

import {GoogleMaps} from '@ionic-native/google-maps';
@NgModule({
  providers: [ GoogleMaps ] // Remove GoogleMap from this list
})

2. Fix Duplicate Variable & Container ID in addproject.ts #

You have two declarations of map—remove one. Also, pass the native element reference to googleMaps.create() instead of a mismatched string ID. Here's the corrected version:

import { Component, ElementRef, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController, Platform } from 'ionic-angular';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, CameraPosition, MarkerOptions, Marker, LatLng } from '@ionic-native/google-maps';

@IonicPage()
@Component({
  selector: 'page-addproject',
  templateUrl: 'addproject.html',
})
export class AddprojectPage {
  @ViewChild('map') private mapElement: ElementRef;
  private map: GoogleMap; // Only one map variable declaration
  private location: LatLng;

  constructor(private googleMaps: GoogleMaps) { }

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap() {
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };

    // Pass the native element instead of a string ID
    this.map = this.googleMaps.create(this.mapElement.nativeElement, mapOptions);

    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log('Map is ready!');
        this.map.addMarker({
          title: 'Ionic',
          icon: 'blue',
          animation: 'DROP',
          position: {
            lat: 43.0741904,
            lng: -89.3809802
          }
        })
        .then(marker => {
          marker.on(GoogleMapsEvent.MARKER_CLICK)
            .subscribe(() => {
              alert('clicked');
            });
        });
      });
  }
}

3. Verify Template Height #

Your addproject.html structure is fine, but ensure the parent .map container has an explicit height so the map renders properly:

<div class="map" style="height: 400px;"> 
  <div #map style="height: 100%;"></div> 
</div>

Additional Checks #

• Confirm you've installed the Cordova plugin correctly with your API keys:

  ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_KEY" --variable API_KEY_FOR_IOS="YOUR_IOS_KEY"
  

• Double-check that your Google Cloud API key has Maps SDK for Android and Maps SDK for iOS enabled, and that your app's package name/bundle ID is added to the key's restrictions.

That should resolve the parameter resolution error and get your map loading properly!

内容的提问来源于stack exchange，提问作者core114