ionic 4 地图在浏览器中工作但在 Android 设备中不工作答案

【问题标题】：ionic 4 map working in browser but not in Andriod Deviceionic 4 地图在浏览器中工作但在 Android 设备中不工作
【发布时间】：2019-08-11 22:47:33
【问题描述】：

我尝试使用 ionic cordova run browser -l 并且地图加载得很好。它会加载一个白屏，并且控制台中不会引发任何错误。此外，尝试构建 apk 并在移动设备上出现白屏。我该如何解决这个问题。请帮我。

src/app/package.json（目录）

  "cordova": {
    "plugins": {
      "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "MY_API_KEY"
      },
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "browser",
      "android"
    ]
  }

src/app/config.xml（目录）

<widget>
  <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="MY_API_KEY" />
</widget>

src/app/home/home.page.hml（目录）

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <h3>google map</h3> 
  <div id="map_canvas">
    <button ion-button (click)="onButtonClick($event)">Demo</button>
  </div>

</ion-content>

src/app/home/home.page.ts（目录）

import {
  ToastController,
  Platform
} from '@ionic/angular';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  Marker,
  GoogleMapsAnimation,
  MyLocation
} from '@ionic-native/google-maps';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{

  map: GoogleMap;
  address:string;

  constructor(public toastCtrl: ToastController,
    private platform: Platform) {}
    ngOnInit() {
      // Since ngOnInit() is executed before `deviceready` event,
      // you have to wait the event.
      this.platform.ready();
    }
    onButtonClick()
    {
      this.loadMap();

    }

    loadMap() {
      this.map = GoogleMaps.create('map_canvas', {
        // camera: {
        //   target: {
        //     lat: 43.0741704,
        //     lng: -89.3809802
        //   },
        //   zoom: 18,
        //   tilt: 30
        // }
      });
      this.goToMyLocation();
    }


    goToMyLocation(){
      this.map.clear();

      // Get the location of you
      this.map.getMyLocation().then((location: MyLocation) => {
        console.log(JSON.stringify(location, null ,2));

        // Move the map camera to the location with animation
        this.map.animateCamera({
          target: location.latLng,
          zoom: 17,
          duration: 5000
        });

        //add a marker
        let marker: Marker = this.map.addMarkerSync({
          title: '@ionic-native/google-maps plugin!',
          snippet: 'This plugin is awesome!',
          position: location.latLng,
          animation: GoogleMapsAnimation.BOUNCE
        });

        //show the infoWindow
        marker.showInfoWindow();

        //If clicked it, display the alert
        marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
          this.showToast('clicked!');
        });

        this.map.on(GoogleMapsEvent.MAP_READY).subscribe(
          (data) => {
              console.log("Click MAP",data);
          }
        );
      })
      .catch(err => {
        //this.loading.dismiss();
        this.showToast(err.error_message);
      });
    }

    async showToast(message: string) {
      let toast = await this.toastCtrl.create({
        message: message,
        duration: 2000,
        position: 'middle'
      });
      toast.present();
    }
}

【问题讨论】：

标签： google-maps ionic4

【解决方案1】：

下次提示，提供您正在使用的软件包的链接，以减少人们帮助您的工作量。

您似乎正在使用 Ionic Native 谷歌地图插件。

查看他们的文档，我可以看到与您的代码有些不同：

https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/README.md

例如，您在 ionviewdidload 事件中通过单击按钮加载地图。

你是 this.platform.ready() 没有做任何事情。它返回一个承诺，因此您可以执行类似 ``this.platform.ready().then({ /* some code that waiting for platform */ })` 但您刚刚运行的代码并继续前进。

我想知道您目前使用的代码是从哪里获得的？这是您遵循的一些教程吗？如果是这样，请发布网址 - 比较您是否做错了什么。

我看到您在上面的 sn-ps 中定义了 API_KEY_FOR_ANDROID，但这似乎是针对较早版本的 cordova 插件。

我怀疑你把事情搞砸了，从最新的教程重新开始可能会更好。

【讨论】：