Google maps 爱奥尼亚原生谷歌地图Android不工作

我必须在我的项目中添加一个带有谷歌地图的视图。我遵循了规则，但它不起作用

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

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

当我使用Ionic文档的代码时，我收到了一条错误消息“GoogleMaps[deprecated]请使用GoogleMaps.create（）”。我尝试使用GoogleMaps.create（）而不是构造函数的参数来避免此错误消息，但仍然不起作用

我的离子含量：

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

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

</ion-content>

这里我们得到了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密钥可用于其他项目（而不是Ionic项目），所以idk问题出在哪里

谢谢：）

---

试试这个

正如我在git repo上所描述的，地图插件将本地地图视图放在浏览器的下面（或后面）

这就是为什么map div的所有父元素都变得透明的原因

如果需要设置应用程序的背景，则需要使用

Environment.setBackground（“粉色”）

---

由于地图显示在浏览器下，因此此插件无法在对话框上显示。

我遇到了与OP在遵循

幻灯片页面Google Maps API键上有一个误导信息。幻灯片中的URL不正确。

为Android和IOS生成谷歌地图API密钥，我们使用谷歌云平台

这是我问过同样问题的链接

---

希望它能帮助有同样问题的人。

你在设备或浏览器上测试过它吗？我在设备上测试：）最好向未来的读者解释你的代码是如何解决问题的，而不是一般的尝试此转储。让他先试试，然后只有我能解释！。。。。。如果API出现问题，那又是什么？因此，与其解释.Ty作为回应，不如编写代码，但我已经尝试过了，而且也不起作用：（我已经更改了其中的一些代码，这就是我上传代码的原因。@Husain请使用

GoogleMaps.create（'map'，mapOptions）

而不是

this.GoogleMaps.create（element，mapOptions）

。

@ionic native/google maps

将等待dom元素完全就绪，然后指定map div id。感谢您的回答，我会在有时间的时候在空白项目中检查此项，然后在此处或github更新帖子或答案：）你回答了我的问题，帮我找出了移动灰色地图操作中的问题所在，而我正在遵循官方的爱奥尼亚原生谷歌地图指南，指南中的API关键链接是导致灰色地图问题的原因。我在这里发布了一个答案重定向到我的问题，希望它能帮助一些人。我正试图在一个有背景图像的父元素内的div中显示地图。多亏了你的回答，我现在知道了为什么图像正在消失；有没有什么办法可以保存图像？

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');
              });
          });

      });
  }
}

   loadMap() {
            let element = document.getElementById('map');
            let mapOptions: GoogleMapOptions = {
              camera: {
                target: {
                   lat: 43.0741904,
                   lng: -89.3809802
                },
               zoom: 18,
               tilt: 30
             }
        };

      let map: GoogleMap = this.googleMaps.create(element, mapOptions);

       map.addMarker({
               title: 'Location',
               icon: 'blue',
               animation: 'DROP',
               position: {
                 lat: 43.0741904,
                 lng: -89.3809802
               }
         })
          .then(marker => {
             marker.on(GoogleMapsEvent.MARKER_CLICK)
                 .subscribe(() => {
                    //alert('clicked');
                  });
              });
  }