Question

我正在尝试在离子应用环境中加载谷歌地图。它在浏览器上完美运行。但是，当我将应用程序加载到iphone和模拟器上时，我只能在地图位置看到我的选项卡上有一个空白屏幕。我尝试使用谷歌浏览器api密钥和ios密钥。请帮我。这是我的控制器和HTML。

控制器：

  angular.module('starter.controllers', [])

 .controller('DashCtrl', function($scope, $state, $cordovaGeolocation, $ionicLoading ) {
  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);

  //Wait until the map is loaded
  google.maps.event.addListenerOnce($scope.map, 'idle', function () {

    var marker = new google.maps.Marker({
      map: $scope.map,
      animation: google.maps.Animation.DROP,
      position: latLng
    });

    var infoWindow = new google.maps.InfoWindow({
      content: "Here I am!"
    });

    google.maps.event.addListener(marker, 'click', function () {
      infoWindow.open($scope.map, marker);
    });

  });

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

//center function
$scope.centerOnMe = function () {
  console.log("Centering");
  if (!$scope.map) {
    return;
  }

  $scope.loading = $ionicLoading.show({
    content: 'Getting current location...',
    template: '<ion-spinner class="spinner-energized"></ion-spinner>',
    showBackdrop: false
  });

  $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.loading.hide();

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

这是我的HTML：

<ion-view view-title="mymap">
<ion-content>
<div id="map" style="width: 100%;height: 100%;" data-tap-disabled="true">                 </div>

离子谷歌地图没有在ios上加载，但在浏览器上工作

0 个答案: