离子Google Map API偶尔加载 [英] Ionic Google Map API loads occasionally

问题描述

试图使用带有Ionic的Google API测试应用程序，出于某种原因，有时它会显示谷歌地图，有时它不会随机。我们没有得到任何错误或任何问题，它只是不加载谷歌API的地图。

控制器：

  .controller（'Extra'，function（$ scope，$ ionicLoading，$ compile）{
 
函数initialize（）{
 var myLatlng = new google.maps.LatLng（43.07493，-89.381388）; 
 
 var mapOptions = {
 center：myLatlng，
 zoom：16，
 mapTypeId：google .maps.MapTypeId.ROADMAP 
; 
 var map = new google.maps.Map（document.getElementById（map），
 mapOptions）; 
 
 // Marker + infowindow + angularjs编译ng-click 
 var contentString =< div>< a ng-click ='clickTest（）'> Click me！< / a>< / div> ; 
 var compiled = $ compile（contentString）（$ scope）; 
 
 var infowindow = new google.maps.InfoWindow（{
 content：compiled [0] 
}）; 
 
 var marker = new google.maps.Mar ker（{
位置：myLatlng，
地图：地图，
标题：'Uluru（艾尔斯岩石）'
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.open（map，marker）; 
}）; 
 
 $ scope.map = map; 
} 
 google.maps.event.addDomListener（window，'load'，initialize）; 
 $ b $ scope.centerOnMe = function（）{
 if（！$ scope.map）{
 return; 
 
 
 $ scope.loading = $ ionicLoading.show（{
 content：'获取当前位置...'，
 showBackdrop：false 
 }）; 
 
 navigator.geolocation.getCurrentPosition（function（pos）{
 $ scope.map.setCenter（new google.maps.LatLng（pos.coords.latitude，pos.coords.longitude）） ; 
 $ scope.loading.hide（）; 
}，函数（错误）{
 alert（'Unable to get location：'+ error.message）; 
}） ; 
}; 
 
 
}）; 
  

HTML：

 < ion-view view-title =Extra> 
< ion-content> 
< ion-header-bar class =bar-dark> 
< h1 class =title>地图< / h1> 
< / ion-header-bar> 
< ion-content> 
< div id =mapdata-tap-disabled =truestyle =width：100％; height：100％;>< / div> 
< / ion-content> 
< ion-footer-bar class =bar-dark> 
< a ng-click =centerOnMe（）class =button button-icon icon ion-navigate> Find Me< / a> 
< / ion-footer-bar> 
< / ion-content> 
< / ion-view> 
  

Index.html

 <！DOCTYPE html> 
< html> 
< head> 
< meta charset =utf-8> 
< meta name =viewportcontent =initial-scale = 1，maximum-scale = 1，user-scalable = no，width = device-width> 
< title>< / title> 
 
< link href =lib / ionic / css / ionic.css =stylesheet> 
< link href =css / style.css =stylesheet> 
 
 <！ - 如果使用Sass（首先运行gulp sass），然后在下面取消注释并移除包含上面的
< link href =css / ionic.app.css的CSS。的rel = 样式表 > 
  - > 
 
<！ -  ionic / angularjs js  - > 
< script src =lib / ionic / js / ionic.bundle.js>< / script> 
 
< / script> 
<！ -  cordova脚本（在开发过程中这将是一个404） - > 
< script src =cordova.js>< / script> 
 
 <！ -   - 您的应用程序的js  - > 
< script src =js / app.js>< / script> 
< script src =https://maps.googleapis.com/maps/api/js?key=AIzaSyB16s​​GmIekuGIvYOfNoW9T44377IU2d2Es&amp;sensor=true> 
< / script> 
< script src =js / controllers.js>< / script> 
 
< script src =js / services.js>< / script> 
 
< / head> 
< body ng-app =starter> 
 <！ -  
导航栏将在我们在视图之间导航时更新。 
  - > 
< ion-nav-bar class =bar-stable> 
< ion-nav-back-button> 
< / ion-nav-back-button> 
< / ion-nav-bar> 
 <！ -  
这些视图将会显示在< ion-nav-view>指令低于
模板位于/ templates文件夹中（但如果您愿意，也可以
在此html文件中内嵌模板）。 
  - > 
< ion-nav-view>< / ion-nav-view> 
< / body> 
< / html> 
  

解决方案

我无法理解您的要求，但我有为你创建一个小例子。通过使用下面的代码，你可以显示谷歌地图。如果你需要任何额外的功能。请让我知道？

控制器

  .controller（'searchCtrl'，function（$ scope）{
 var myLatlng = new google。 maps.LatLng（43.07493，-89.381388）; 
 var mapOptions = {
 streetViewControl：true，
 center：myLatlng，
 zoom：16，
 mapTypeId：google。 maps.MapTypeId.TERRAIN 
}; 
 
 var map = new google.maps.Map（document.getElementById（'map'），
 mapOptions）; 
 
 var marker = new google.maps.Marker（{
 position：myLatlng，
 map：map 
}）; 
 $ scope.map = map; 
}）; 
  

HTML

 < ion-view view-title =Extra> 
< ion-content> 
< div id =mapstyle =height：500px;数据抽头禁用= 真 >< / DIV> 
< / ion-content> 
< / ion-view> 
  

index.html

 <！DOCTYPE html> 
< html> 
< head> 
< meta charset =utf-8> 
< meta name =viewportcontent =initial-scale = 1，maximum-scale = 1，user-scalable = no，width = device-width> 
< title>< / title> 
< link href =lib / ionic / css / ionic.css =stylesheet> 
< link href =css / style.css =stylesheet> 
 <！ - 如果使用Sass（首先运行gulp sass），则取消下面的注释并移除包含上面的
   - > 
<！ -  ionic / angularjs js  - > 
< script src =lib / ionic / js / ionic.bundle.js>< / script> 
< / script> 
<！ -  cordova脚本（在开发过程中这将是一个404） - > 
< script src =cordova.js>< / script> 
<！ - 您的应用程序的js  - > 
< script src =js / app.js>< / script> 
< script src =https://maps.googleapis.com/maps/api/js?key=AIzaSyB16s​​GmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true> 
< / script> 
< script src =js / controllers.js>< / script> 
< script src =js / services.js>< / script> 
< / head> 
 
< body ng-app =starter> 
 <！ -  
导航栏将在我们在视图之间导航时更新。 
  - > 
< ion-nav-bar class =bar-stable> 
< ion-nav-back-button> 
< / ion-nav-back-button> 
< / ion-nav-bar> 
 <！ -  
这些视图将会显示在< ion-nav-view>指令低于
模板位于/ templates文件夹中（但如果您愿意，也可以
在此html文件中内嵌模板）。 
  - > 
< ion-nav-view>< / ion-nav-view> 
< / body> 
 
< / html> 
  

Trying to test an app using the google API with Ionic and for some reason sometimes it will display google maps and sometimes it won't at random. We do not get any error's thrown or any issues, it simply just does not load the google API's map.

Controller:

.controller('Extra', function($scope, $ionicLoading, $compile) {

    function initialize() {
    var myLatlng = new google.maps.LatLng(43.07493,-89.381388);

    var mapOptions = {
      center: myLatlng,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
                                  mapOptions);

    //Marker + infowindow + angularjs compiled ng-click
    var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
    var compiled = $compile(contentString)($scope);

    var infowindow = new google.maps.InfoWindow({
      content: compiled[0]
    });

    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
    });

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

    $scope.map = map;
  }
  google.maps.event.addDomListener(window, 'load', initialize);

  $scope.centerOnMe = function() {
    if(!$scope.map) {
      return;
    }

    $scope.loading = $ionicLoading.show({
      content: 'Getting current location...',
      showBackdrop: false
    });

    navigator.geolocation.getCurrentPosition(function(pos) {
      $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
      $scope.loading.hide();
    }, function(error) {
      alert('Unable to get location: ' + error.message);
    });
  };


});

HTML:

<ion-view view-title="Extra">
  <ion-content>
    <ion-header-bar class="bar-dark" >
      <h1 class="title">Map</h1>
    </ion-header-bar>
    <ion-content>
      <div id="map" data-tap-disabled="true" style="width:100%; height:100%;"></div>
    </ion-content>
    <ion-footer-bar class="bar-dark">
      <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
    </ion-footer-bar>
  </ion-content>
</ion-view>

Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    </script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&amp;sensor=true">
    </script>
    <script src="js/controllers.js"></script>

    <script src="js/services.js"></script>

  </head>
  <body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>
  </body>
</html>

解决方案

I couldn't understand your requirement.but i have created a small example for you.By using below code,you can display google map.If you need any additional functionality.please let me know?

Controller

.controller('searchCtrl', function($scope) {
    var myLatlng = new google.maps.LatLng(43.07493, -89.381388);
    var mapOptions = {
        streetViewControl: true,
        center: myLatlng,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map'),
        mapOptions);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
    $scope.map = map;
});

HTML

 <ion-view view-title="Extra">
     <ion-content>
      <div id="map" style="height:500px;" data-tap-disabled="true"></div>                
     </ion-content>
 </ion-view>

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    </script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true">
    </script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
</head>

<body ng-app="starter">
    <!--
          The nav bar that will be updated as we navigate between views.
        -->
    <ion-nav-bar class="bar-stable">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <!--
          The views will be rendered in the <ion-nav-view> directive below
          Templates are in the /templates folder (but you could also
          have templates inline in this html file if you'd like).
        -->
    <ion-nav-view></ion-nav-view>
</body>

</html>

这篇关于离子Google Map API偶尔加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！