J'essaye de migrer un simple projet de Google Maps (littéralement fait d'un exemple sur leur site) vers un projet AngularJS. Permettez-moi de préface en disant que je suis nouveau à la fois angularJS et web dev, alors s'il vous plaît soyez gentil :) J'ai un projet simple au https://github.com/eroth/angular-web-app (fichiers principaux ci-dessous) où je vais à partir d'un commit initial en utilisant un tutoriel Google Maps sur pour essayer de le convertir en application AngularJS, mais je n'ai pas réussi à le faire fonctionner, bien que j'ai vérifié que ma fonction $scope.init() dans mon fichier MapController.js est appelée à partir de mon fichier map.html.Essayer d'obtenir un exemple simple de Google Maps pour travailler avec AngularJS
Ma question est double: est-ce que quelque chose ne va pas avec mon code, ou ai-je besoin de quelque chose comme ça (qui semble être très bon): http://nlaplante.github.io/angular-google-maps/? Je travaille sur l'intégration de ceci dans mon projet sur une autre branche, mais j'essaye de comprendre si c'est un problème avec mon code existant, ou si j'avais besoin de quelque chose comme cette bibliothèque pour le faire fonctionner avec AngularJS. Si c'est le dernier, pourquoi? S'excuse d'avance si c'est une erreur extrêmement simple que je commets; Comme je l'ai dit, je suis assez nouveau dans tout ça, même si j'ai suivi quelques tutoriels AngularJS et ça me semble génial.
Ceci est mon fichier map.html:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- INCLUDE REQUIRED THIRD PARTY LIBRARY JAVASCRIPT AND CSS -->
<script type="text/javascript" src="js/angular.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<!-- INCLUDE APPLICATION SPECIFIC CSS AND JAVASCRIPT -->
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true&language=en">
</script>
<script type="text/javascript" src="js/web-app/app.js"></script>
<script type="text/javascript" src="js/web-app/controllers/mainController.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container main-frame" ng-app="WebApp" ng-controller ="mainController" ng-init="init()">
<div id="map-canvas"/>
</div>
</body>
</html>
Et ceci est mon fichier MapController.js:
app.controller("mainController", function($scope, $http){
$scope.initialLocation;
$scope.siberia = new google.maps.LatLng(60, 105);
$scope.newyork = new google.maps.LatLng(40.7463, -73.9913);
$scope.browserSupportFlag = new Boolean();
$scope.map;
$scope.retina = window.devicePixelRatio > 1;
$scope.init = function() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
console.log('In main init');
//first test——map uses hard-coded location, next will get user's location and pull deals
$scope.map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
// Try W3C Geolocation (Preferred)
if (navigator.geolocation) {
$scope.browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
$scope.initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var currentLat = position.coords.latitude;
var currentLon = position.coords.longitude;
$scope.map.setCenter($scope.initialLocation);
// performApiCall(currentLat, currentLon);
//definite custom map pin for user location & plot it on map
var pinColor = "5ea9ff";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.6|0|" + pinColor + "|0|_|k",
new google.maps.Size(25, 60),
new google.maps.Point(0,0),
new google.maps.Point(10, 24));
var marker = new google.maps.Marker({
position: $scope.initialLocation,
map: $scope.map,
icon: pinImage,
});
}, function() {
handleNoGeolocation($scope.browserSupportFlag);
});
}
// Browser doesn't support Geolocation
else {
$scope.browserSupportFlag = false;
handleNoGeolocation($scope.browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag == true) {
alert("Geolocation service failed.");
$scope.initialLocation = newyork;
} else {
alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
$scope.initialLocation = siberia;
}
map.setCenter($scope.initialLocation);
}
};
google.maps.event.addDomListener(window, 'load', $scope.init);
});
Merci à l'avance pour toute aide!