Question

情况：

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

设置地图：

为了测试它，我已经完成了以下步骤：

注册Google Console Developer
启用Google Maps 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）中测试它时，地图甚至没有打开。当然原因可能很简单：因为我有一个浏览器密钥。

但是我已经尝试了其他按键而且无论如何都没有打开。

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

我必须在我的Ionic应用程序中使用哪种类型的Google Map才能在Android和Ios上正常运行？

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

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

谢谢！

Answer 1

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

按照文档中的基本步骤进行设置就足够了。它可以在浏览器中作为角度应用程序使用，也可以在手机中作为离子混合应用程序使用。

Answer 2

我和你有相同的示例代码，并且在Genymotion中面临同样的问题。我通过调整一些Genymotion开发人员设置解决了这个问题。

开发设置 - ＆gt;允许检查模拟位置 Allow mock locations
确保GPS已开启。 Set GPS on

Answer 3

尝试以下脚本 -

SELECT SUM(CASE WHEN STATE = 'DONE' THEN PRODUCT_QTY ELSE - PRODUCT_QTY END)
FROM TABLEBLA 
WHERE STATE IN ('DONE', 'CANCEL') AND
      location_dest_id in (12, 18) and location_id = 5;

适用于Ionic应用的Google Map API

3 个答案: