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 文件中添加了<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
然后我重新运行应用程序并显示地图。希望这对你也有用。
【讨论】:
以上是关于Quasar Cordova 谷歌地图插件的主要内容,如果未能解决你的问题,请参考以下文章