带有 Ionic 3 的 Google Maps Native cordova 插件仅显示灰色框

2024-02-21

我试图显示地图,但我得到的只是一个底部带有谷歌徽标的灰色框。我查看了该网站上的其他帖子,并尝试了所有这些帖子,但似乎都没有解决该问题。 我正在使用 ionic 3.12.0 和 cordova 插件 googlemaps 2.0.7 我已确保 API 密钥正确并在仪表板中启用。

我尝试过使用教程https://ionicframework.com/docs/native/google-maps/ https://ionicframework.com/docs/native/google-maps/下面是代码

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


import { Component, Input, ViewChild } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({
  selector: 'map',
  template: '<div #map id="map"></div>'
})
export class Map {

  map: GoogleMap;
  mapElement: HTMLElement;
  constructor(private googleMaps: GoogleMaps) { }

  setMapLocation(coords: any) {
    this.map.setCameraTarget(coords);
  }

  ionViewDidLoad() {
   this.loadMap();
  }

  loadMap() {
  this.mapElement = document.getElementById('map');

  let mapOptions: GoogleMapOptions = {
    camera: {
      target: {
        lat: 43.0741904,
        lng: -89.3809802
      },
      zoom: 18,
      tilt: 30
    }
  };

  this.map = this.googleMaps.create(this.mapElement, 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');
            });
        });

    });
}}

我添加的 CSS 是

#map {
    width: 100% !important;
    height: 100% !important;
    img{ max-width: none !important; }
    overflow:visible !important;
    z-index: 1;
}

ion-app._gmaps_cdv_ .nav-decor{
  background-color: transparent !important;
}

我有同样的问题,

这对我有用。

删除谷歌地图插件 移除平台

使用不同的 API 密钥重新添加插件 重新添加平台

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带有 Ionic 3 的 Google Maps Native cordova 插件仅显示灰色框 的相关文章

随机推荐

  • SwiftUI 中的多行可编辑文本字段

    我正在寻找在 macOS 的 Swift UI 中创建一个可编辑的多行文本框 我想创建一个语法突出显示文本编辑器 因此它是多行的 并可以更改各行的样式 在当前状态下 这可能吗 我在网上几乎找不到任何有关它的文档 它可能很有用 这是我使用 S
  • SugarCRM - 数据库故障 - 行大小太大?

    我一直在为 SugarCRM 构建一个自定义模块 但遇到了一些问题 在安装该模块时 我遇到了 数据库故障 请参阅 Sugarcrm log 了解详细信息 检查日志文件后 我发现错误是这样的 MySQL 错误 1118 行大小太大 所用表类型
  • 使用Javascript连接SQL Server数据库

    我需要使用 Javascript 从 SQl Server 2008 数据库读取一些数据 所以我写了这个 html页面代码
  • Android SDK Mediaplayer.create随机返回null

    我遇到一个问题 即使音频文件确实存在 MediaPlayer create 方法偶尔也会返回 null 事实上 如果我将 create 调用放入 while 循环中 媒体播放器最终将创建成功 这似乎只发生在我的手机 运行 2 1 的 HTC
  • 在命令行上检查音频文件的持续时间

    我需要检查一组音频文件的持续时间 有没有一种简单的方法可以在 unix 命令行上执行此操作 gt duration 我有一个令人惊叹的 SoX 应用程序 它有一个名为 统计 的选项 可以生成一组包括持续时间的音频信息 我正在寻找一种只获得持
  • 记住在单选 AlertDialog 中选择的内容

    我有一个AlertDialog它将数组显示为单个选定的选项 protected boolean blFrom blTo protected void showSelectToDialog boolean checkedDate new bo
  • 如何使用按行分列来获取频率计数?

    我有一个数据框 用于跟踪个人 x Bob 在感兴趣的时间范围 1900 1999 年 内的服务参与情况 srvc inv 1 0 library tidyverse dat lt data frame name rep Bob 100 da
  • 有工作要做时挂起并通知线程

    我有多个线程 在 IIS 上运行的 C 应用程序 正在运行 所有线程都需要与同一个 MQ 后端进行通信 为了最大限度地减少网络流量 我只需要在有工作要做时发送后端请求 将有一个线程来监视是否有工作要做 并且它需要通知其他线程它们也应该开始处
  • Mac 上 Boost 的链接器错误 (OSX 10.10.02 | Xcode 6.1.1)

    最近我开始在 Windows 上使用 Boost 来完成一个项目 它需要跨平台 所以我也在Mac上安装了它 很遗憾 每当我将它添加到 Xcode 项目时 它都会给我带来大量链接器错误和转换警告 链接器错误之一的示例 体系结构 x86 64
  • 如何使用 codeigniter cart 类删除单个购物车项目?

    我正在为我的购物车项目使用 codeigniter cart 类 我的购物车中有很多商品 现在我有了购物车行 ID 现在我真正需要做的是 需要从购物车中删除特定的商品 而不是所有内容 销毁购物车 cartcontents this gt c
  • 在 .net 中使用 selenium 2.0 Web 驱动程序的示例/教程?

    有没有使用 selenium 2 0 Web 驱动程序与 net 的教程 示例 我尝试过搜索 但只能找到 java 没有找到有关 net 和 selenium 2 0 Web 驱动程序的信息 这里的文档有一个 C 示例 http selen
  • 使用 OpenPGP 子项签名提交失败

    我想使用我的 GPS 2 子项之一在 Git 中签署提交 标签 即 我新创建的 RSA4096 仅签名密钥 其长 ID B0 sec ed25519 9F 2016 01 07 expires 2023 01 05 Key fingerpr
  • 函数内的时间戳比较

    为了防止旧版本覆盖新版本 在这个简单的函数中 create function myupdate paramts timestamp without time zone language plpgsql AS begin step 1 com
  • Swift如何改变backIndicatorImage的tintColor

    我在 AppDelegate 中得到了这段代码 U INavigationBar appearance backIndicatorImage imageLiteral resourceName backarrow 即使图像的颜色是白色 它也
  • 类型错误:(0,_mockingooose.default)不是函数_mockingooose

    我正在尝试使用以下代码来模拟我的猫鼬模式 report schema js import mongoose Schema from mongoose const reportSchema new Schema data type strin
  • Patchwork 无法识别具有 ggMargnial 分布元素的图

    尝试显示 2 个图gg边际但这些情节并未得到认可 我将代码的简化版本粘贴到下面的位置 Before添加 ggMarginal 元素 Patchwork 按预期并排显示 ggplots After使用 ggMarginal 添加边际分布 Pa
  • 在 Git 中跨分支共享文件

    我的项目中有很多文件有时会被修改 但总是在许多不同的分支之间共享 示例包括构建脚本 包含路径的批处理文件等 甚至 gitignore 文件本身也是一个示例 我希望这些东西在源代码管理中 但我不希望各个分支跟踪它们的更改 你如何处理这种情况
  • Android Studio + Spek 集成

    我正在尝试将 Spek 测试框架添加到我的 Android Studio 项目中 按照说明进行操作Here http spekframework org docs latest 我最终将以下内容添加到我的模块中build gradle te
  • Qt 托盘图标拖放

    有谁知道是否可以使用 Qt 对托盘图标进行拖放操作 我一直在做一些研究 这是我得出的结论 QSystemTrayIcon 无法显式处理拖 放事件 不过 有一种基于 Spifftastic 托盘图标定位方法的解决方法 您创建一个独特的彩色图标
  • 带有 Ionic 3 的 Google Maps Native cordova 插件仅显示灰色框

    我试图显示地图 但我得到的只是一个底部带有谷歌徽标的灰色框 我查看了该网站上的其他帖子 并尝试了所有这些帖子 但似乎都没有解决该问题 我正在使用 ionic 3 12 0 和 cordova 插件 googlemaps 2 0 7 我已确保