谷歌地图与离子

Question

谷歌地图与离子

我试图用Ionic谷歌地图实现地图.我按照这个链接的编码但我得到的是一个空白屏幕不知道我哪里出错了.请帮忙

这是控制器

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

.controller('MapCtrl', 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);
    });
  };

  $scope.clickTest = function() {
    alert('Example of infowindow with ng-click')
  };

});

Run Code Online (Sandbox Code Playgroud)

这是html文件

 <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>


<body ng-controller="MapCtrl">
<ion-header-bar class="bar-dark" >
  <h1 class="title">Map</h1>
</ion-header-bar>
<ion-content>

  <div id="map" data-tap-disabled="true"></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>
  </body>

Run Code Online (Sandbox Code Playgroud)

请帮忙.

Answer 1

err*_*337 25

我改变了一些事情来实现这个目的:

你不再需要谷歌地图的api密钥了,这对于脚本src来说已经足够了(请参阅Google Maps API密钥):

<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>

Run Code Online (Sandbox Code Playgroud)

将"function initialize()"替换为"$ scope.init()"并注释掉它所在的行:

//google.maps.event.addDomListener(window, 'load', initialize);

Run Code Online (Sandbox Code Playgroud)

还要将ng-init ="init()"添加到您的html中,如下所示:

<ion-header-bar class="bar-dark" ng-init="init()">
    <h1 class="title">Map</h1>
</ion-header-bar>

Run Code Online (Sandbox Code Playgroud)

我不知道为什么它不能使用domListener,但是数据需要在显示之前进行初始化(请参阅Google MAP API Uncaught TypeError:无法读取null的属性'offsetWidth').使用ng-init,您可以实现此目的.

最终控制器应如下所示:

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

    $scope.init = function() {
        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);
        });
    };

    $scope.clickTest = function() {
        alert('Example of infowindow with ng-click')
    };
});

Run Code Online (Sandbox Code Playgroud)

希望这有帮助!

Answer 2

小智 13

或者只是替换它

google.maps.event.addDomListener(window, 'load', initialize);

Run Code Online (Sandbox Code Playgroud)

为了这

ionic.Platform.ready(initialize);

Run Code Online (Sandbox Code Playgroud)

参考http://codepen.io/mircobabini/developer/ionic-google-maps-nightly

归档时间：	11 年前
查看次数：	19726 次
最近记录：	9 年，6 月前