Question

我尝试使用离子cordova运行浏览器-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();
    }
}

Answer 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（{/ *等待平台* /}的一些代码），但是您刚刚运行的代码将直接运行。

我想知道到目前为止您在哪里使用过的代码？您遵循的是一些教程吗？如果是这样，请张贴网址-比较您做错了什么。

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

我怀疑您做得一团糟，从最新的教程开始可能会做得更好。

ionic 4地图可在浏览器中使用，但不能在Andriod Device中使用

1 个答案: