Question

我从事Ionic 4的研究，我想在我的项目中实现google map。 Google地图可以正常工作，但是在android棉花糖上显示空白页，这是我的类型脚本代码：

import { Component, OnInit, EventEmitter, Output, ViewChild,
         AfterViewInit } from '@angular/core';
import { Platform} from '@ionic/angular';

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

import { Coordinate, PlaceLocation } from '../../../pages/location.model';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'app-location-picker',
  templateUrl: './location-picker.component.html',
  styleUrls: ['./location-picker.component.scss'],
})
export class LocationPickerComponent implements OnInit, AfterViewInit {
  @Output() public locationPick = new EventEmitter<PlaceLocation>();
  latPlace: any;
  lngPlace: any;
  selectedLocationImage: string;

  myLocate: any;

  @ViewChild('map') element;
  clickListener: any;
  markersOption: MarkerOptions;

  map: GoogleMap;

  coordinate: Coordinate;

  constructor( public googleMaps: GoogleMaps, public plt: Platform,
               private storage: Storage) { }

  ngOnInit() {}

  ngAfterViewInit() {
    this.plt.ready().then(() => {
      this.initMap();
    });
  }

  initMap() {

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

    map.getMyLocation().then(position => {

        const lati = position.latLng.lat;
        const lngt = position.latLng.lng;
        this.storage.set('lati', lati);
        this.storage.set('lngt', lngt);

        this.coordinate = {
          lat: lati,
          lng: lngt
        };

        map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {

        const coordinates: LatLng = new LatLng(lati, lngt);

        const position = {
          target: coordinates,
          zoom: 16
        };

        map.animateCamera(position);

        const markerOptions: MarkerOptions = {
          position: coordinates,
          title: 'موقعیت شما'
        };

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

    map.on(GoogleMapsEvent.MAP_CLICK).subscribe(e => {
      // let _latitude = pos.coords.latitude;
      // let _latititud = pos.latLng.lat;
      // loc = new LatLng(res.coords.latitude, res.coords.longitude);

      var latit = '' + e;

      const latnum = latit.substring(latit.indexOf(' ') + 1, latit.indexOf(','));
      const lngnum = latit.substring(latit.lastIndexOf(' ') + 1, latit.length - 1);

      const coordinates: LatLng = new LatLng(parseFloat(latnum), parseFloat(lngnum));

      this.coordinate = {
        lat: parseFloat(latnum),
        lng: parseFloat(lngnum)
      };
      const position = {
        target: coordinates,
        zoom: 16
      };

      const markerOptions: MarkerOptions = {
        position: coordinates,
        title: 'موقعیت انتخابی'
      };

      map.clear();

      map.addMarker(this.myLocate)
        .then((marker: Marker) => {
          marker.showInfoWindow();
      });

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

      this.storage.set('lati', coordinates.lat);
      this.storage.set('lngt', coordinates.lng);
    });
  }
}

和谷歌地图版本：

"cordova-plugin-googlemaps": "2.6.2",

  "cordova-plugin-googlemaps": {
    "PLAY_SERVICES_VERSION": "15.0.1",
    "ANDROID_SUPPORT_V4_VERSION": "27.+"
  }

"@ionic-native/google-maps": "^5.5.0",

我刚接触离子技术，尝试了不同的方法，但没有得到答案，而是在https://forum.ionicframework.com和https://stackoverflow.com中进行搜索。

还有我的html代码：

<ion-content>
  <div #map class="location-image"></div>
</ion-content>

我的CSS代码：

.location-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
}

在Android棉花糖中显示空白页本机Google地图？

0 个答案: