Sto provando a migrare un semplice progetto di Google Maps (letteralmente tratto da un esempio sul loro sito) su un progetto AngularJS. Lasciatemi prefigurare ciò dicendo che sono nuovo sia per AngularJS che per il webdv, quindi per favore sii gentile :) Ho un semplice progetto al https://github.com/eroth/angular-web-app (file principali sotto) dove vado da un commit iniziale usando un tutorial di Google Maps per provare a convertirlo in un'app AngularJS, ma non sono riuscito a farlo funzionare, anche se ho verificato che la mia funzione $scope.init() nel mio file MapController.js viene chiamata dal mio file map.html.Cercando di ottenere un semplice esempio di Google Maps per lavorare con AngularJS
La mia domanda è duplice: è il caso che qualcosa non funzioni con il mio codice, o ho bisogno di qualcosa di simile (che sembra essere molto buono): http://nlaplante.github.io/angular-google-maps/? Sto lavorando per incorporare questo nel mio progetto in un altro ramo, ma sto cercando di capire se si tratta di un problema con il mio codice esistente, o se avrei bisogno di qualcosa come questa libreria per farlo funzionare con AngularJS. Se è quest'ultimo, perché? Si scusa in anticipo se si tratta di un errore estremamente semplice che sto facendo; come ho detto, sono abbastanza nuovo a tutto questo, anche se ho seguito alcuni tutorial di AngularJS e sembra fantastico.
Questo è il mio file 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>
e questo è il mio file 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);
});
Grazie in anticipo per qualsiasi aiuto!