Quasar Cordova 谷歌地图插件答案

【问题标题】：Quasar Cordova Google Maps PluginQuasar Cordova 谷歌地图插件
【发布时间】：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 和计费。

标签： javascript google-maps cordova cordova-plugins quasar-framework

【解决方案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

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

【讨论】：