ionic ngcordova map 地圖

幾乎每個APP都會有地圖 所以在這裏記錄一下

1.在index.html 中

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

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

2. CSS

 map {
   display: block;
   width: 100%;
   height: 100%;
 }
 .scroll {
   height: 100%;
 }

3. 生成一個指令

 .directive('map', function() {
   return {
     restrict: 'E',
     scope: {
       onCreate: '&'
     },
     link: function ($scope, $element, $attr) {
       function initialize() {
         var mylang=new google.maps.LatLng(43.07493, -89.381388);
         var mapOptions = {
           center: mylang,
           zoom: 16,
           mapTypeId: google.maps.MapTypeId.ROADMAP
         };
         var map = new google.maps.Map($element[0], mapOptions);
         //Marker + infowindow + angularjs compiled ng-click
         var marker = new google.maps.Marker({
           position: mylang,
           map: map,
           title: 'Uluru (Ayers Rock)'
         });
         var infowindow = new google.maps.InfoWindow({
         content:"Hello World!"
          });
         google.maps.event.addListener(marker, 'click', function() {
           infowindow.open(map,marker);
         });
         $scope.onCreate({map: map});

         //Stop the side bar from dragging when mousedown / tapdown on the map
         google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
           e.preventDefault();
           return false;
         });
       }

       if (document.readyState === "complete") {
         initialize();
       } else {
         google.maps.event.addDomListener(window, 'load', initialize);
       }
     }
   }
 });

4.在index.html 中寫入 map 標籤  <map on-create="mapCreated(map)"></map>

5.設置控制器

 .controller('MapCtrl', function($scope, $ionicLoading, $cordovaGeolocation) {
   $scope.mapCreated = function(map) {
     $scope.map = map;
   };

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

     $scope.loading = $ionicLoading.show({
       content: 'Getting current location...',
       showBackdrop: false
     });
     $cordovaGeolocation
       .getCurrentPosition()
       .then(function(pos) {
         var lat = pos.coords.latitude
         var long = pos.coords.longitude
         console.log('Got pos', pos);
         $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));//
         var marker=new google.maps.Marker({
               map: $scope.map,
               position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)
         });//這個marker 設置了一下
         $scope.loading.hide();
       }, function(err) {
         // error
       });
     // navigator.geolocation.getCurrentPosition(function (pos) {
     //   console.log('Got pos', pos);
     //   $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
     //        var marker=new google.maps.Marker({
     //           map: $scope.map,
     //           position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)
     //     });
     //   $scope.loading.hide();
     // }, function (error) {
     //   alert('Unable to get location: ' + error.message);
     // });
   };
 });

6. 忘記了...為了更加的準確 還是添加了ngcordova plugin 插件

  cordova plugin add org.apache.cordova.geolocation 

不要忘記了注入 ngCordova  $cordovaGeolocation