为什么加载地图画布后谷歌地图崩溃

Question

我在android 设备上收到以下error，我的应用崩溃。

这是我的完整代码：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Geolocation ,GeolocationOptions } from '@ionic-native/geolocation';


import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 LatLng,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';      


@IonicPage()
@Component({
  selector: 'page-google-map-test',
  templateUrl: 'google-map-test.html',
})

export class GoogleMapTestPage {

  constructor(...,public googleMaps: GoogleMaps,private geolocation : Geolocation) {
  }

 ionViewDidLoad() {
    this.mapHandler2();       
  }


  mapHandler2(){

    // create a new map by passing HTMLElement
     let element: HTMLElement = document.getElementById('map');

     let map: GoogleMap = this.googleMaps.create(element);

     let LatLang: LatLng = new LatLng(43.0741904,-89.3809802); 


          // create CameraPosition 
       let position: any = {
          target: LatLang,    
          zoom: 18,
          tilt: 30
       };     


        map.one(GoogleMapsEvent.MAP_READY).then(() => {
         console.log('Map is ready!');
         // Now you can add elements to the map like the marker
          map.moveCamera(position);

         // create new marker
        let markerOptions:any = {
            position: LatLng,
            title: 'Ionic'
        };

        const marker:any = map.addMarker(markerOptions)
            .then((marker: Marker) => {
                marker.showInfoWindow();
            });


         this.geolocation.getCurrentPosition().then((position) => {

             let LatLang: LatLng = new LatLng(position.coords.latitude,position.coords.longitude);


              map.setCameraTarget(LatLang);
              map.setCameraZoom(18);


                 // create new marker
                  let markerOptions:any = {
                      position: LatLng,
                      title: 'You Are Here'
                  };

                const marker:any = map.addMarker(markerOptions)
                      .then((marker: Marker) => {
                          marker.showInfoWindow();
                  });       


          }, (err) => {
            console.log(err); 
            alert('location error');            
          }); 



        });  // End of GoogleMapsEvent.MAP_READY

  }

}    

最初map canvas 会加载，但崩溃显示上述屏幕。

请帮我解决这个问题，我对 ionic 3 很陌生。

Answer 1

我在这里遇到了同样的问题。在尝试了几种绘制标记的方法后，我发现当我在可见区域之外添加标记时，应用程序发生了崩溃。然后我将初始地图的配置更改为远距离缩放设置（在我的情况下，我从缩放 = 13 设置为缩放 = 4）并且只有在绘制了所有标记之后，我才将缩放设置为接近所需的标记。我猜你也可以在绘制之前在初始配置中设置所有标记的 latLng 数组，这样相机就会根据这些标记进行调整，并且它们都在可见区域中。 这是我的最终代码：

    async loadMap(): Promise<void> {
        try {
            if (this.map && this.mapReady) {
                await this.map.clear();
                await this.plotMarkers();
            } else {
                this.map = GoogleMaps.create('map_canvas', {
                    controls: { compass: true, myLocationButton: false, myLocation: false, zoom: false, mapToolbar: false},
                    camera: { target: {
                        lat: currentLatitude, //I get those using geolocation plugin, but I guess is doable by the maps plugin itself.
                        lng: currentLongitude
                    }, tilt: 15, zoom: 5}
                });
                await this.map.one('map_ready');
                this.mapReady = true;
                await this.plotMarkers();
            }
        } catch (e) {
            console.log(e);
            //display the error message properly
        }
    }
    async plotMarkers(): Promise<void> {
        if (!this.map || !this.mapReady) throw new Error('Map is not ready!');

        const markersOpts: MarkerOptions[] = [];
        const bounds: ILatLng[] = [];
        const itemsToPlot: any[] = [/* your items containing a location to be plot. I assume here there is a attribute named 'location'. */];
        for (const item of itemsToPlot) {
            if (item && item.location) {
                const pos: ILatLng = { lat: item.location.lat, lng: item.location.lon};
                const markerOpts: MarkerOptions = {
                    icon: {
                        url: this.markersPath + '/custom_marker.png', //has to be a PNG. SVG crashes the app.
                        anchor: { x: 40, y: 55}, //adjust the best fi for yor custom image
                        label: {
                            text: item.description, //assuming that there is a description in the item you want to plot
                            color: '#555555', //you can change the color according to any specific attribute of your item
                            fontSize: 12,
                            bold: true
                        }
                    },
                    animation: 'DROP', //set to null to remove animation,
                    position: pos,
                    origin: { x: 0, y: 0},
                    anchor: [40, 55]
                };
                bounds.push(pos);
                markersOpts.push(markerOpts);
            }
        }
        //prepare zoom to fit all markers
        if (bounds.length > 0) {
            this.map.animateCamera({ target: bounds, duration: 400});
        }
        //plot all markers
        markersOpts.forEach(async (opt: MarkerOptions) => {
            const marker: Marker = await this.map.addMarker(opt);
            marker.setZIndex(100000);
            marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
                //do something when click on a marker
            });
        });
    }