时间戳

首页 > 解决方案 > 谷歌地图 Javascript API 离子

google-maps - 谷歌地图 Javascript API 离子

问题描述

我正在尝试在我的应用程序上呈现谷歌地图，它一直在说：

Google Maps JavaScript API error: RefererNotAllowedMapError

我知道这是因为我没有网站主机，但我真的没有它，因为它是一个 Android 应用程序。我没有任何主机。我也尝试过没有限制和带有调试密钥库的谷歌地图sdk。有人能帮我吗？

这是我的代码：

packages.json
"@ionic-native/google-maps": "^5.5.0",
"cordova-plugin-googlemaps": "^2.6.2",

config.xml
<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="API_KEY" />

index.html
<script src="http://maps.google.com/maps/api/js?key=API_KEY"></script>

page.ts
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  LatLng,
  MarkerOptions,
  Marker,
  Environment
} from "@ionic-native/google-maps/ngx";

declare var google;

@Component({
  selector: 'app-quem-somos',
  templateUrl: './quem-somos.page.html',
  styleUrls: ['./quem-somos.page.scss'],
})
export class QuemSomosPage {
  @ViewChild('map', {static: false}) mapElement: ElementRef;
  @ViewChild('map2', {static: false}) mapElement2: ElementRef;

  map;
  map2;
  toastController;
  latLng;
  latLng2;

  constructor(toastController: ToastController, public platform: Platform, public launchNavigator: LaunchNavigator) {
      this.toastController = toastController;
   }

   ionViewDidEnter() {
    this.platform.ready().then(() => {
      this.loadMap();
    });

   }

  loadMap(){
    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': 'API_KEY',
      'API_KEY_FOR_BROWSER_DEBUG': 'API_KEY'
    });

    this.latLng = new google.maps.LatLng(-22.918978, -47.071869);

    let mapOptions = {
      center: this.latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    this.latLng2 = new google.maps.LatLng(-22.979192, -47.127404);

    let mapOptions2 = {
      center: this.latLng2,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map2 = new google.maps.Map(this.mapElement2.nativeElement, mapOptions2);

    this.addMarker();
    this.addMarker2();
  }

page.html
<div class="abrir-mapa">
        <div class="abrir-mapa" #map id="map"></div>
      </div>

page.scss
#map {
    width: 100%;
    height: 100%;
}

#map2 {
    width: 100%;
    height: 100%;
}

.abrir-mapa {
    height: 25rem;
    width: 100%;
}

标签： google-mapsionic-frameworkreferrer

解决方案

我可以解决问题！我刚刚删除了 android 平台并删除了 node_modules 并且它再次工作！但我想这不应该发生。

推荐阅读