适用于Ionic应用的Google Map API

Question

情况:

我需要在我的Ionic应用程序中加入Google地图.

设置地图:

为了测试它,我已经完成了以下步骤:

1. 在Google Console Developer中注册
2. 启用Google Maps JavaScript API
3. 获取API密钥作为浏览器密钥

4. 将脚本添加到index.html:

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

5. 创建一个map div和相关的css:

   <div id="map" data-tap-disabled="true"></div>
   
   #map {
       width: 100%;
       height: 100%;
   }
   

6. 制作一个以用户地理位置为中心的基本地图:

   .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)中测试它时,地图甚至没有打开.当然它可能很简单:因为我有一个浏览器密钥.

但我已经尝试过其他按键并且无论如何都没有打开.

由于代码是正确的,问题是:

1. 哪种类型的谷歌地图我必须启用我的Ionic应用程序中的谷歌地图,适用于Android和IOS？

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

2. 我需要在服务器密钥 - 浏览器密钥 - android密钥 - ios密钥之间获得哪种密钥？浏览器密钥是否适用于本机应用程序？

谢谢!!

Answer 1

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

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