幾乎每個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