Question

我必须在我的项目中添加一个包含谷歌地图的视图。我跟着official ionic native Google maps documentation，但它不起作用。

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

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

当我使用Ionic文档的代码时，我收到了此错误消息＆＃34; GoogleMaps [已弃用]请使用GoogleMaps.create（）＆＃34;。我尝试使用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密钥适用于其他项目（不是离子项目），所以idk在哪里就是问题。

谢谢：）

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

试试这个

Answer 2

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

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

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

如果您需要设置应用程序的背景，则需要使用Environment.setBackground("pink")。

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

Answer 3

当OP跟随Official Ionic Native Google Maps Guide

时，我遇到了确切的问题

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

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

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

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

离子原生谷歌地图Android无法正常工作

3 个答案: