ionic ngcordova map 地圖

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

1.在index.html 中

1     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
2
3     <!-- cordova script (this will be a 404 during development) -->
4      <script src="lib/ionic/js/ng-cordova.min.js"></script>
5     <script src="cordova.js"></script>

2. CSS

1 map {
2   display: block;
3   width: 100%;
4   height: 100%;
5 }
6 .scroll {
7   height: 100%;
8 }

3. 生成一個指令

 1 .directive(‘map‘, function() {
 2   return {
 3     restrict: ‘E‘,
 4     scope: {
 5       onCreate: ‘&‘
 6     },
 7     link: function ($scope, $element, $attr) {
 8       function initialize() {
 9         var mylang=new google.maps.LatLng(43.07493, -89.381388);
10         var mapOptions = {
11           center: mylang,
12           zoom: 16,
13           mapTypeId: google.maps.MapTypeId.ROADMAP
14         };
15         var map = new google.maps.Map($element[0], mapOptions);
16         //Marker + infowindow + angularjs compiled ng-click
17         var marker = new google.maps.Marker({
18           position: mylang,
19           map: map,
20           title: ‘Uluru (Ayers Rock)‘
21         });
22         var infowindow = new google.maps.InfoWindow({
23         content:"Hello World!"
24          });
25         google.maps.event.addListener(marker, ‘click‘, function() {
26           infowindow.open(map,marker);
27         });
28         $scope.onCreate({map: map});
29
30         //Stop the side bar from dragging when mousedown / tapdown on the map
31         google.maps.event.addDomListener($element[0], ‘mousedown‘, function (e) {
32           e.preventDefault();
33           return false;
34         });
35       }
36
37       if (document.readyState === "complete") {
38         initialize();
39       } else {
40         google.maps.event.addDomListener(window, ‘load‘, initialize);
41       }
42     }
43   }
44 });

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

5.設置控制器

 1 .controller(‘MapCtrl‘, function($scope, $ionicLoading, $cordovaGeolocation) {
 2   $scope.mapCreated = function(map) {
 3     $scope.map = map;
 4   };
 5
 6   $scope.centerOnMe = function() {
 7     console.log("Centering");
 8     if (!$scope.map) {
 9       return;
10     }
11
12     $scope.loading = $ionicLoading.show({
13       content: ‘Getting current location...‘,
14       showBackdrop: false
15     });
16     $cordovaGeolocation
17       .getCurrentPosition()
18       .then(function(pos) {
19         var lat = pos.coords.latitude
20         var long = pos.coords.longitude
21         console.log(‘Got pos‘, pos);
22         $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));//
23         var marker=new google.maps.Marker({
24               map: $scope.map,
25               position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)
26         });//這個marker 設置了一下
27         $scope.loading.hide();
28       }, function(err) {
29         // error
30       });
31     // navigator.geolocation.getCurrentPosition(function (pos) {
32     //   console.log(‘Got pos‘, pos);
33     //   $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
34     //        var marker=new google.maps.Marker({
35     //           map: $scope.map,
36     //           position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)
37     //     });
38     //   $scope.loading.hide();
39     // }, function (error) {
40     //   alert(‘Unable to get location: ‘ + error.message);
41     // });
42   };
43 });

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

 1 cordova plugin add org.apache.cordova.geolocation 

不要忘記了注入 ngCordova  $cordovaGeolocation