Quasar Cordova 谷歌地图插件

Posted

技术标签:

【中文标题】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 文件中添加了&lt;preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="my api key" /&gt;。我试图在我的手机上测试该应用程序,但它卡在 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

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

【讨论】:

以上是关于Quasar Cordova 谷歌地图插件的主要内容,如果未能解决你的问题,请参考以下文章

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

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

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

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

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

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