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