时间戳

首页 > 解决方案 > 带有谷歌地图和 Ionic 3 的空白页

javascript - 带有谷歌地图和 Ionic 3 的空白页

问题描述

Googlemaps 在浏览器和移动设备上的 Ionic 3 中显示一个白页。我已经正确安装了插件并导入了所有内容。测试时它提示我允许定位，然后显示一个没有 Google 徽标的白页。

我尝试重新安装所有插件并检查 API 密钥，一切似乎都有效。

.html

<ion-content padding>
    <div #map id="map"></div>
  </ion-content>

.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { FindridePage } from './findride';
import { Geolocation } from '@ionic-native/geolocation';

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    FindridePage,
  ],
  imports: [
    IonicPageModule.forChild(FindridePage),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })
  ]  ,
  exports: [
    FindridePage
  ]
})
export class FindridePageModule {}

.ts

import { NavController,IonicPage,Platform  } from 'ionic-angular';
import { GoogleMap,GoogleMaps } from '@ionic-native/google-maps';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation';

declare var google: any;

@IonicPage()
@Component({
  selector: 'page-findride',
  templateUrl: 'findride.html'
})
export class FindridePage {
@ViewChild('map') mapElement: ElementRef;
map: any;
markers = [];

  constructor(public navCtrl: NavController, private _googleMaps: GoogleMaps,public platform: Platform,private geolocation: Geolocation) {

      setTimeout(this.initMap(), 10000);

  }



  initMap() {
    console.log('starting');
    this.geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then((resp) => {
      let mylocation = new google.maps.LatLng(resp.coords.latitude,resp.coords.longitude);
      this.map = new google.maps.Map(this.mapElement.nativeElement, {
        zoom: 15,
        center: mylocation
      });
    });
    let watch = this.geolocation.watchPosition();
    watch.subscribe((data) => {
      this.deleteMarkers();
      let updatelocation = new google.maps.LatLng(data.coords.latitude,data.coords.longitude);
      let image = 'assets/imgs/blue-bike.png';
      this.addMarker(updatelocation,image);
      this.setMapOnAll(this.map);
    });
  }
  addMarker(location, image) {
    let marker = new google.maps.Marker({
      position: location,
      map: this.map,
      icon: image
    });
    this.markers.push(marker);
  }

  setMapOnAll(map) {
    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(map);
    }
  }

  clearMarkers() {
    this.setMapOnAll(null);
  }

  deleteMarkers() {
    this.clearMarkers();
    this.markers = [];
  }
 listride(){
    this.navCtrl.push('ListridePage');
 }


}

标签： javascriptionic-frameworkionic3

解决方案

如下设置地图元素的高度和宽度，您将看到地图。如果已加载。

<div #map id="map" style="height:500px; width:300px;">

推荐阅读