2014-10-25 14 views
8

Ich versuche, eine Karte mit Google Maps mit Ionic zu implementieren. Ich folgte der Codierung in diesem Link Aber alles, was ich bekomme, ist ein leerer Bildschirm weiß nicht, wo ich falsch gelaufen bin. Bitte helfenGoogle Maps mit ionischen

Dies ist der Controller

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') 
    }; 

}); 

Dies ist die HTML-Datei

<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> 

bitte helfen ist.

Antwort

24

ich ein paar Dinge geändert diese Arbeit zu bekommen:

Sie brauchen nicht einen API-Schlüssel mehr für Google Maps, das ist genug für das Skript src (siehe Whats the Google Maps API Key):

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

Ersetzen "Funktion initialize()" mit "$ scope.init()" und die Zeile aus kommentieren, wo es sais:

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

auch ng-init = "init()" zu Ihrem html wie folgt hinzu:

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

Ich weiß nicht, warum es nicht mit dem domListener arbeiten, aber die Daten müssen vor der Anzeige initialisiert werden (siehe Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null). Mit ng-init können Sie dies erreichen.

Schluss Controller sollte wie folgt aussehen:

.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') 
    }; 
}); 

Hope this geholfen!

+0

Thank you.This gearbeitet :) –

+0

guten Fang Mann .. – Vinith

+0

Gut, danke –

2

Wenn Sie die neueste Version von Ionic verwenden, stehen die Chancen sind, werden Sie einen leeren Bildschirm auftreten, wenn Sie Bereitstellen für Android aber Sie werden die Karte sehen, wenn Sie die Lösung in einem Webbrowser ausführen. Um zu beheben, müssen Sie ein Whitelist-Plugin hinzufügen: ionic plugin hinzufügen cordova-plugin-whitelist.

+0

Hey David, ich habe das versucht, aber wenn ich die App mit Ionic View betrachte, wird immer noch nichts angezeigt (nicht einmal das Menü wird angezeigt). Irgendwelche anderen Ideen? – danboh

+0

Können Sie auf Plocker teilen? –

+0

Dies ist etwas ähnliches wie das, was ich benutze http://codepen.io/ionic/details/uzngt/ – danboh

0

Ich löste dies, indem ein in:

<ion-content ng-controller="MapCtrl"> 
    <div id="map" data-tap-disabled="true"></div> 
</ion-content> 

und dann werden Sie tun müssen:

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

    google.maps.event.addDomListener(window, 'load', function() { 
     var newLatlng = new google.maps.LatLng(53.5000, -113.4300); 

     var mapOptions = { 
      center: newLatlng, 
      zoom: 15, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

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

     navigator.geolocation.getCurrentPosition(function(pos) { 
      map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); 
      var myLocation = new google.maps.Marker({ 
       position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude), 
       map: map, 
       title: "My Location" 
      }); 
     }); 

     $scope.map = map; 
    }); 

}); 

Referenz von: Implement Google Maps Using Ionic Framework