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

时间:2017-11-18 04:40:29

标签: angular google-maps cordova ionic3 ionic-native

我在error设备上获得了以下android,我的应用崩溃了

enter image description here

这是我的完整代码:

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崩溃显示上述屏幕。

请帮我解决这个问题,我对离子3很新。

1 个答案:

答案 0 :(得分:0)

我在这里面临着同样的问题。在尝试了几种绘制标记的方式后,我只是发现当我在可见区域之外添加标记时,应用程序崩溃了。然后,我将初始地图配置更改为远距缩放设置(在我的情况下,我将缩放比例从13设置为缩放比例4),并且仅在绘制了所有标记后,才将缩放设置为近似于所需标记。我猜您还可以在初始配置中设置所有标记的latLng数组,然后再进行绘制,因此会将摄像机调整为这些标记,并且它们都位于可见区域。