Ionic 2.0中Google Maps插件setMyLocationButtonEnabled成员找不到问题

Hey there! Let's work through this issue step by step—this is a common gotcha with the Ionic Google Maps plugin, so we'll get it sorted quickly.

1. 先确认：你是不是调用错对象了？ #

Most folks run into this problem because they try calling setMyLocationButtonEnabled directly on the injected GoogleMaps service, but this method belongs to the map instance (GoogleMap), not the service itself. Here's the correct way to do it:

import { GoogleMaps, GoogleMap, GoogleMapsEvent } from '@ionic-native/google-maps';
import { Component } from '@angular/core';

@Component({
  selector: 'page-map',
  templateUrl: 'map.html'
})
export class MapPage {
  private map: GoogleMap;

  constructor(private googleMaps: GoogleMaps) {}

  ionViewDidLoad() {
    this.loadMap();
  }

  loadMap() {
    // Grab the map container element from your template
    const mapElement = document.getElementById('map');
    
    // Create the actual map instance
    this.map = this.googleMaps.create(mapElement);

    // Wait for the map to finish loading before modifying it
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      // This is where you call the method—on the map instance!
      this.map.setMyLocationButtonEnabled(true);
      // Don't forget to enable location tracking itself too
      this.map.setMyLocationEnabled(true);
    });
  }
}

2. Check plugin version compatibility #

If you're using a newer version of @ionic-native/google-maps, the API might have changed slightly:

• Some versions bundle the button setting into setOptions instead:

  this.map.setOptions({
    myLocationButton: true,
    myLocation: true
  });
  

• Double-check the README of your installed plugin version (you can find it in your node_modules/@ionic-native/google-maps folder) to confirm the exact method name.

3. Make sure the native Cordova plugin is properly installed #

Adding GoogleMaps to your app.module.ts providers isn't enough—you need to have the actual native plugin installed too. Try re-installing it to be safe:

# Remove the existing plugin first
cordova plugin remove cordova-plugin-googlemaps

# Re-install with your API keys (replace with your own!)
cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY"

4. Verify your app.module.ts setup #

Just to be thorough, double-check that your module configuration is correct:

import { GoogleMaps } from '@ionic-native/google-maps';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from 'ionic-angular';

@NgModule({
  declarations: [
    // Your page components here
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(YourAppName)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // Your page components here
  ],
  providers: [
    GoogleMaps, // Ensure this is listed here
    // Other providers...
  ]
})
export class AppModule {}

If you're still stuck after these steps, try cleaning your project and rebuilding:

ionic cordova platform remove android
ionic cordova platform add android
ionic cordova build android

内容的提问来源于stack exchange，提问作者A Simões