用于 Ionic 应用程序的 Google Map API答案

【问题标题】：Google Map API for Ionic app用于 Ionic 应用程序的 Google Map API
【发布时间】：2015-12-11 13:30:05
【问题描述】：

情况：

我需要在我的 Ionic 应用中包含一个 Google 地图。

设置地图：

为了测试它，我做了以下步骤：

注册Google Console Developer
启用 Google 地图 JavaScript API
获取 API 密钥作为浏览器密钥

将脚本添加到 index.html：

<script src="http://maps.google.com/maps/api/js?key=MY_API_KEY&sensor=true"></script>

创建地图div和相关css：

<div id="map" data-tap-disabled="true"></div>

#map {
    width: 100%;
    height: 100%;
}

制作以用户地理位置为中心的基本地图：

.controller('MapCtrl', function($scope, $state, $cordovaGeolocation) {
    var options = {timeout: 10000, enableHighAccuracy: true};

    $cordovaGeolocation.getCurrentPosition(options).then(function(position){

    var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    var mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);

  }, function(error){
    console.log("Could not get location");
  });
});

问题：

它工作正常，但这是为了在浏览器中进行测试。当我在应用程序或模拟器（Genymotion）中测试它时，地图甚至没有打开。当然原因可能很简单：因为我有一个浏览器密钥。

但是我已经尝试了其他键，无论如何都无法打开。

由于代码是正确的，问题是：

我必须启用哪种类型的 Google 地图才能在我的 Ionic 应用中拥有适用于 Android 和 Ios 的 Google 地图？

Google Maps JavaScript API 是正确的选择吗？

我必须在服务器密钥-浏览器密钥-android 密钥-ios 密钥之间获取哪种密钥？浏览器密钥是否适用于原生应用？

谢谢！！

【问题讨论】：

标签： javascript android ios google-maps ionic-framework

【解决方案1】：

我和你有同样的示例代码，在 Genymotion 中也遇到了同样的问题。我通过调整一些 Genymotion 开发者设置来解决这个问题。

开发设置 -> 选中允许模拟位置 Allow mock locations
确保 GPS 已开启。 Set GPS on

【讨论】：

【解决方案2】：

我找到了使用angular-google-maps 的解决方案。

按照文档中的基本步骤进行设置就足够了。它在浏览器中作为 Angular 应用程序运行，在手机中作为 Ionic 混合应用程序运行。

【讨论】：

【解决方案3】：

试试下面的脚本-

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places&language=en"></script>

【讨论】：