Ionic中Google地图报错Cannot set MyLocation of null的解决方法

Hey there! That "Cannot set MyLocation of null" error is super common when working with Google Maps in Ionic—usually it boils down to trying to interact with the map before it's fully ready, or not having the right setup in place. Let's break down the fixes you need:

1. Wait for the DOM to load before initializing the map #

In Ionic/Angular, don't try to grab the map container in ngOnInit—the DOM might not be fully rendered yet. Instead, use the AfterViewInit lifecycle hook or Ionic's ionViewDidEnter method to ensure the map container element exists.

Example using AfterViewInit:

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.page.html',
})
export class MapPage implements AfterViewInit {
  @ViewChild('mapContainer', { static: false }) mapContainer: ElementRef;

  ngAfterViewInit() {
    // Initialize your map here
    this.loadMap();
  }

  loadMap() {
    // Map initialization code goes here
  }
}

2. Ensure Google Maps is fully loaded before using it #

If you're loading the Google Maps script asynchronously, you need to wait for it to finish loading before creating your map instance. Add a check to confirm the google global exists:

loadMap() {
  if (!window.google || !window.google.maps) {
    console.error('Google Maps script hasn\'t loaded yet');
    // Optionally retry after a short delay
    setTimeout(() => this.loadMap(), 500);
    return;
  }

  // Proceed with map initialization
}

3. Don't call setMyLocation until the map is ready #

The setMyLocation method requires a fully initialized map instance. Wait for the map's idle event (which fires when the map has finished loading) before enabling my location:

loadMap() {
  // ... previous checks ...

  const mapOptions = {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 15
  };

  this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);

  // Wait for the map to be fully ready before enabling my location
  this.map.addListener('idle', () => {
    if (this.map.setMyLocation) {
      this.map.setMyLocation(true);
    } else {
      console.error('setMyLocation is not available (check your API permissions)');
    }
  });
}

4. Verify your location permissions and API setup #

This error can also pop up if your app doesn't have permission to access the user's location, or your Google Maps API key is misconfigured:

• Android: Add these permissions to your AndroidManifest.xml:

  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  

• iOS: Add these entries to your Info.plist:

  <key>NSLocationWhenInUseUsageDescription</key>
  <string>We need your location to provide navigation directions</string>
  <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
  <string>We need your location to provide navigation directions</string>
  

• Google Cloud Console: Make sure your API key has the Maps SDK for Android, Maps SDK for iOS, and JavaScript Maps API enabled, and that your app's package/bundle ID is added to the key's restrictions.

Full Working Example #

Here's a complete component that ties all these fixes together, including navigation from current location to a destination:

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

declare var google: any;

@Component({
  selector: 'app-nav-map',
  templateUrl: './nav-map.page.html',
  styleUrls: ['./nav-map.page.scss'],
})
export class NavMapPage implements AfterViewInit {
  @ViewChild('mapContainer', { static: false }) mapContainer: ElementRef;
  map: any;
  currentPosition: any;

  ngAfterViewInit() {
    this.loadMap();
  }

  loadMap() {
    // Wait for Google Maps script to load
    if (!window.google || !window.google.maps) {
      setTimeout(() => this.loadMap(), 500);
      return;
    }

    // Get user's current location
    navigator.geolocation.getCurrentPosition((pos) => {
      this.currentPosition = { lat: pos.coords.latitude, lng: pos.coords.longitude };
      this.initMapWithNavigation();
    }, (err) => {
      console.error('Failed to get location:', err);
      // Fallback to default location if geolocation fails
      this.currentPosition = { lat: 37.7749, lng: -122.4194 };
      this.initMapWithNavigation();
    });
  }

  initMapWithNavigation() {
    const mapOptions = {
      center: this.currentPosition,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Ensure map container exists
    if (!this.mapContainer.nativeElement) {
      console.error('Map container element is null');
      return;
    }

    this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);

    // Enable my location once map is ready
    this.map.addListener('idle', () => {
      this.map.setMyLocation(true);
    });

    // Set up directions to destination
    const destination = { lat: 37.8044, lng: -122.4782 }; // Example destination
    const directionsService = new google.maps.DirectionsService();
    const directionsRenderer = new google.maps.DirectionsRenderer();
    directionsRenderer.setMap(this.map);

    // Calculate and display route
    directionsService.route({
      origin: this.currentPosition,
      destination: destination,
      travelMode: google.maps.TravelMode.DRIVING
    }, (response, status) => {
      if (status === google.maps.DirectionsStatus.OK) {
        directionsRenderer.setDirections(response);
      } else {
        console.error('Directions request failed:', status);
      }
    });
  }
}

And the corresponding template (nav-map.page.html):

<ion-content fullscreen>
  <div #mapContainer style="width: 100%; height: 100%;"></div>
</ion-content>

Double-check that your map container has a defined width and height—if it's 0x0, the map might initialize incorrectly too!

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