离子原生谷歌地图 Android 不工作答案

【问题标题】：Ionic native Google Maps Android not working离子原生谷歌地图 Android 不工作
【发布时间】：2018-04-29 19:13:41
【问题描述】：

我必须在我的项目中添加一个带有谷歌地图的视图。我关注了official ionic native Google maps documentation，但它不起作用。

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

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

当我使用 Ionic 文档的代码时，我收到此错误消息“GoogleMaps [已弃用] 请使用 GoogleMaps.create()”。我尝试使用 GoogleMaps.create() 而不是构造函数的参数来避免此错误消息，但仍然无法正常工作。

我的离子含量：

<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 的片段：

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 项目），所以我知道问题出在哪里。

谢谢:)

【问题讨论】：

你在设备或浏览器上测试过吗？
我正在设备上测试:)

标签： google-maps ionic-framework ionic3

【解决方案1】：

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

试试这个

【讨论】：

最好解释一下你的代码如何为未来的读者解决问题，而不是一个通用的试试这个转储。
让他先试一下然后只有我能解释！.....如果是API问题，那又怎样？因此，编写代码比解释更好。
Ty 响应，但我已经尝试过，但也不起作用:(
我更改了里面的一些代码，这就是我上传代码的原因。
@Husain 请使用GoogleMaps.create('map', mapOptions) 而不是this.googleMaps.create(element, mapOptions);。当您指定地图 div id 时，@ionic-native/google-maps 会等到 dom 元素完全准备好。

【解决方案2】：

正如我在 git repo 中所描述的，地图插件将原生地图视图放置在浏览器下方（或后面）。

https://github.com/mapsplugin/cordova-plugin-googlemaps#how-does-this-plugin-work

这就是地图 div 的所有父元素都变得透明的原因。

如果需要设置应用程序的后台，需要使用Environment.setBackground("pink")。

由于地图显示在浏览器下，这个插件不能显示在对话框中。

【讨论】：

感谢您的回答，有时间我会在一个空白项目中检查一下，然后我会在此处或 github 更新帖子或答案:)
您回答并帮助我找出了移动灰色地图 stackoverflow.com/questions/50709647/… OP 上的问题，我正在关注官方 ionic native google maps 指南，指南中的 API 关键链接是 console.developers.google.com/projectselector/apis/library导致灰色地图问题。我在这里发布了一个答案重定向到我的问题希望它可以帮助一些人
我正在尝试在具有背景图像的父元素内的 div 中显示地图。感谢您的回答，我现在知道为什么图像消失了；有什么办法可以保留图片吗？

【解决方案3】：

在关注Official Ionic Native Google Maps Guide 时，我遇到了与 OP 一样的确切问题

幻灯片页面 Google Maps API Key 存在误导。幻灯片中的 URL 是 https://console.developers.google.com/projectselector/apis/library，这是不正确的。

为了生成适用于 Android 和 IOS 的 Google Maps API 密钥，我们使用 Google Cloud Platforms https://cloud.google.com/maps-platform/

这是我问过同样问题的链接Ionic3 ionic native google maps doesn't show map but only google logo (display grey blank map )

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

【讨论】：