离子原生谷歌地图Android无法正常工作 [英] Ionic native Google Maps Android not working

问题描述

我必须在我的项目中添加一个包含谷歌地图的视图。我按照官方离子本地Google地图文档进行了操作，但它不起作用。

I have to add a view with Google maps map on my project. I followed the official ionic native Google maps documentation but it does not work.

我将背景颜色粉红色分配给包含地图的div（用于测试），在将地图添加到div之前，div正确显示。但是当地图添加到div时，模态窗口的背景变为透明，div消失。但是没有显示错误。

I assigned background color pink to the div that contains the map (for testing), before adding the map to the div, the div shows correctly. But when the map is added to the div the background of the modal window turns to transparent, and the div disappears. But no error is shown.

我尝试了不同的方法在div上附加地图，但结果是一样的。

I tried different ways to attach the map on the div, but the results are the same.

当我使用Ionic文档的代码时，我收到此错误消息GoogleMaps [已弃用]请使用GoogleMaps.create（）。我尝试使用GoogleMaps.create（）而不是构造函数的参数来避免此错误消息，但仍无效。

When I use the code of the Ionic docs I got this error message "GoogleMaps [deprecated] Please use GoogleMaps.create()". I tried using GoogleMaps.create() instead of the argument of the constructor avoiding this error message, but still not working.

我的离子内容：

<ion-content fullscreen overflow-scroll="true" class="container">

  <div #map id="map"></div>

</ion-content>

部分css：

#map {
        height: 90%;
        width: 100%;
        border-width: 5px;
        border-color: red;
        background: pink;
    }

这里我们得到了ts的片段：

And here we got fragments of the ts:

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

...

export class PerfilPage {
  @ViewChild(Content) content: Content;
  @ViewChild('map') mapElement: ElementRef;
  map: GoogleMap;

...

ionViewDidLoad() {
// I use this for changing the nab-bar color
    this.content.ionScroll.subscribe((scroll) => {
      // console.log('user scrolled', scroll);
      if ( scroll.scrollTop > 100 ) {
        this.toolbar_color = "bg_search"
      } else {
        this.toolbar_color = "transparent"
      }
      this.ref.detectChanges();
    });

    // this.loadMap();
    // this.initMap();
    // this.testMap();
    this.offiMap();
  }

// Official Ionic documentation code
 offiMap() {
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 43.0741904,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    };

    this.map = this.googleMaps.create('map', mapOptions);

    // Wait the MAP_READY before using any methods.
    this.map.one(GoogleMapsEvent.MAP_READY)
      .then(() => {
        console.log('Map is ready!');

        // Now you can use all methods safely.
        this.map.addMarker({
            title: 'Ionic',
            icon: 'blue',
            animation: 'DROP',
            position: {
              lat: 43.0741904,
              lng: -89.3809802
            }
          })
          .then(marker => {
            marker.on(GoogleMapsEvent.MARKER_CLICK)
              .subscribe(() => {
                alert('clicked');
              });
          });

      });
  }
}

PS：API密钥适用于其他项目（不是离子项目），所以idk问题出在哪里。

PS: the API key works on other projects (not Ionic projects), so idk where is the problem.

谢谢：）

推荐答案

按照官方Ionic Native Google地图指南

幻灯片页面Google Maps API密钥存在误导。幻灯片中的网址为 https://console.developers.google.com/projectselector/ apis / library 是不正确的。

用于为Android和IOS生成Google Maps API密钥，我们使用Google云平台 https://cloud.google.com/maps-platform/

这是我问同一个问题的链接 Ionic3离子原生谷歌地图不显示地图，只显示谷歌徽标（显示灰色空白地图）

Here's the link I asked the same question Ionic3 ionic native google maps doesn't show map but only google logo (display grey blank map )

希望它可以帮助那些遇到同样问题的人。

Hope it can help people who have the same issue.

这篇关于离子原生谷歌地图Android无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！