Quasar Cordova 谷歌地图插件

关键词：

【中文标题】Quasar Cordova 谷歌地图插件【英文标题】：Quasar Cordova Google Maps Plugin 【发布时间】：2019-12-18 02:02:00 【问题描述】：

我一直在尝试使用来自https://github.com/mapsplugin/cordova-plugin-googlemaps 的科尔多瓦谷歌地图插件，但还没有让它在我的安卓上顺利运行。

我找到了代码

我已经为谷歌地图尝试了其他几个 github 存储库，但仍然没有运气。

<q-page class="q-pa-xl">
    <h1>Hello, World!</h1>
    <div id="map_canvas">
      <button id="button">Click me!</button>
    </div>

</q-page>
</template>

<script>
export default 
  name: 'Map',
  created () 
    // Vuex get the map lat/lng
    document.addEventListener('deviceready', () => 
    var div = document.getElementById('map_canvas')

    // Create a Google Maps native view under the map_canvas div.
    //var map = plugin.google.maps.Map.getMap(div)
    var map = window.plugin.google.maps.Map.getMap(div)

    // If you click the button, do something...
    var button = document.getElementById('button')
    button.addEventListener('click', function () 
      // Move to the position with animation
      map.animateCamera(
        target: lat: 37.422359, lng: -122.084344,
        zoom: 17,
        tilt: 60,
        bearing: 140,
        duration: 5000
      )

      // Add a maker
      var marker = map.addMarker(
        position: lat: 37.422359, lng: -122.084344,
        title: 'Welecome to \n' +
                'Cordova GoogleMaps plugin for iOS and Android',
        snippet: 'This plugin is awesome!',
        animation: window.plugin.google.maps.Animation.BOUNCE
      )

      // Show the info window
      marker.showInfoWindow()
    )
    , false)
  

</script>

我也在 src-cordova 的 config.xml 文件中添加了<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="my api key" />。我试图在我的手机上测试该应用程序，但它卡在 Apache Cordova 设备已准备好闪烁。

【问题讨论】：

您遇到了什么错误，您的地图是什么样的？如果在浏览器平台上运行地图会加载吗？还要仔细检查您是否添加了有效的 API 密钥并为您的项目启用了 Maps API 和计费。 【参考方案1】：

首先，请确保您遵循了确切的说明并使用了插件latest documentation 中的完整代码。仔细检查您是否添加了有效的 API 密钥，并且您的项目中启用了 JS API。

我自己安装了这个插件并按照这些说明进行操作，当我在 Android Studio 中运行地图时，遇到了同样的问题，即地图未初始化并卡在“Cordova 设备已准备就绪”视图中。

所以我尝试使用文档中指示的命令cordova run android 并得到以下错误：

FAILURE：构建失败并出现异常。

其中：构建文件 '\platforms\android\app\build.gradle' 行：20

出了什么问题：评估项目 ':app' 时出现问题。

未能应用插件 [id 'com.android.application'] 支持的最低 Gradle 版本为 5.1.1。当前版本是 4.10.3。如果使用 gradle 包装器，请尝试将 \gradle\wrapper\gradle-wrapper.properties 中的 distributionUrl 编辑为 gradle-5.1.1-all.zip

所以我就这么做了；用 5.1.1 替换了 gradle 版本 4.10.3。

gradle.wrapper.properties

distributionUrl=https\://services.gradle.org/distributions/gradle-5.1.1-all.zip

然后我重新运行应用程序并显示地图。希望这对你也有用。

【讨论】：

科尔多瓦谷歌地图插件安装Phonegap

】科尔多瓦谷歌地图插件安装Phonegap【英文标题】：CordovaGoogleMapsPluginInstallationForPhonegap【发布时间】：2018-02-2309:46:03【问题描述】：我正在尝试为phonegap安装cordova-plugin-googlemaps，但它给了我这个错误：无法安装“cordova-plugin-google... 查看详情

谷歌地图不适用于 ionic cordova run android

】谷歌地图不适用于ioniccordovarunandroid【英文标题】：Googlemapsnotworkingwithioniccordovarunandroid【发布时间】：2018-01-0203:51:04【问题描述】：我正在使用ionic框架构建应用程序。该应用程序的主要功能是基于谷歌地图。我使用了thistutoria... 查看详情

Cordova 类似页面的应用程序中的多个谷歌地图

】Cordova类似页面的应用程序中的多个谷歌地图【英文标题】：MultiplegooglemapsinCordovapage-likeapp【发布时间】：2016-05-1909:37:50【问题描述】：我正在开发基于Cordova的移动应用程序，主要目的是显示和从Google地图中选择位置。应用程... 查看详情

Cordova 地理定位插件有时不工作

】Cordova地理定位插件有时不工作【英文标题】：Cordovageolocationpluginnotworkingsometimes【发布时间】：2017-08-1517:07:12【问题描述】：我正在android上开发一个严重依赖gps插件功能的应用程序，但是在对gps进行2次调用后，它就停止工作... 查看详情

使用谷歌地图检索当前位置

...:22【问题描述】：我的代码检查当前用户位置，然后使用cordova的地理定位插件加载所有附近的商店，包括到位置的距离。这是我的代码：.factory(\'GSSearchLocationService\',[\'$cordovaGeolocation\',\'$q\',fu 查看详情

如何添加 Android 意图以在 Cordova/Ionic 项目中打开谷歌地图？

】如何添加Android意图以在Cordova/Ionic项目中打开谷歌地图？【英文标题】：HowtoaddAndroidintenttoopengooglemapsinCordova/Ionicproject?【发布时间】：2021-12-2700:33:28【问题描述】：AndroidAPI30(Android11)需要在应用清单中定义的额外权限才能打开... 查看详情

Cordova iOS 启动 comgooglemaps 失败

】CordovaiOS启动comgooglemaps失败【英文标题】：CordovaiOSlaunchcomgooglemapsfail【发布时间】：2018-05-1620:43:37【问题描述】：我有一个小问题。我使用comgooglemaps方案来调用谷歌地图并执行搜索。这工作正常，但问题是如果用户没有安装谷... 查看详情

Phonegap GPS定位插件cordova-plugin-gpslocation

】PhonegapGPS定位插件cordova-plugin-gpslocation【英文标题】：PhonegapGPSlocationplugincordova-plugin-gpslocation【发布时间】：2020-05-2609:44:28【问题描述】：我正在尝试获取gps坐标以在我的手机中移动谷歌地图。我的xml文件中添加了这样的插件... 查看详情

谷歌地图在 Ionic 2 中以模态显示

...但不适用于模式。我尝试使用网络版谷歌地图API甚至原生cordova插件，但结果是相同的，模态中的空白地图，页面上的工作地图。任何建议如何解决这个问题？【问题 查看详情

ionic1添加百度地图插件cordova-plugin-baidumaplocation(代码片段)

cordova-plugin-baidumaplocation这个插件返回的数据是json格式的 可以直接获取 android和ios都可用1.先去百度地图平台去创建应用 获取访问应用AK android和ios是分开的不同的  http://lbsyun.baidu.com/2.创建的时候需要发布... 查看详情

我可以将原生 GoogleMap 添加到我的 Cordova 混合应用程序吗？

】我可以将原生GoogleMap添加到我的Cordova混合应用程序吗？【英文标题】：CanIaddanativeGoogleMaptomyCordovahybridapp?【发布时间】：2015-07-1505:20:44【问题描述】：我可以将原生谷歌地图添加到我的科尔多瓦混合应用程序中的一个页面吗？... 查看详情

php谷歌地图插件-代码(代码片段)

查看详情

用于地图的 Jquery 插件工具

...谁能推荐一个链接或示例来使用jquery创建类似图集的工具谷歌地图有什么用？谢谢..【问题讨论】：我认为您必须更具体地了解“类似地图集的工具”应该做什么。@Pekka：我想要一个地图可以像谷歌地图一样滚动的工具，可以定... 查看详情

居中所有标记和折线谷歌地图插件颤振适合屏幕

】居中所有标记和折线谷歌地图插件颤振适合屏幕【英文标题】：Centerallmarkerandpolylinegooglemapspluginflutterfittoscreen【发布时间】：2019-11-0500:08:50【问题描述】：我想将所有标记放在地图中心，并根据设备大小调整缩放下面是我所做... 查看详情

谷歌地图使用 google_maps_flutter 插件显示空白地图

】谷歌地图使用google_maps_flutter插件显示空白地图【英文标题】：GoogleMapsshowsblankmapusinggoogle_maps_flutterplugin【发布时间】：2019-04-1521:07:22【问题描述】：我正在开发一个使用google_maps_flutter插件（版本0.5.7）来显示地图的应用程序。... 查看详情

Flutter 谷歌地图插件中的 getbounds

】Flutter谷歌地图插件中的getbounds【英文标题】：getboundsinFluttergooglemapsplugin【发布时间】：2019-06-1906:16:15【问题描述】：我需要在我搜索的屏幕上获取所有标记，并且我在javascript和java中使用getBounds找到方法是否可以在颤振中做... 查看详情

如何使用 jquery 插件全屏显示谷歌地图

】如何使用jquery插件全屏显示谷歌地图【英文标题】：Howtofullscreengooglemapswithjqueryplugin【发布时间】：2012-07-2419:04:53【问题描述】：如下图所示，地图只显示在左上角，可以在整个屏幕上拖动它，但它会跳回那个方块，只显示在... 查看详情

使用谷歌地球插件给了我白色地图

】使用谷歌地球插件给了我白色地图【英文标题】：UsingGoogleEarthPlugingivesmewhitemap【发布时间】：2013-06-0508:40:10【问题描述】：由于某种原因，当使用带有EXTJS的Google地球插件时，它只会给我一张白色的地图。希望我可以发布一张... 查看详情