javascript - 适用于 Ionic 应用程序的 Google Map API

Question

情况:

我需要在我的 Ionic 应用程序中包含 Google map 。

设置 map :

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

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

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. 制作以用户地理位置为中心的基本 map :

   .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) 中测试它时， map 甚至没有打开。当然原因可能很简单:因为我有一个浏览器 key 。

但我已经尝试了其他 key ，但仍然无法打开。

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

1. 我必须启用哪种类型的 Google map 才能在我的 Ionic 应用程序中使用适用于 Android 和 Ios 的 Google map ？

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

1. 我必须在服务器 key - 浏览器 key - android key - ios key 之间获得哪种 key ？浏览器 key 是否适用于 native 应用程序？

谢谢!!

Answer 1

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

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