Я пытаюсь перенести простой проект Google Maps (буквально из примера на своем сайте) в проект AngularJS. Позвольте мне предисловие к этому, сказав, что я новичок и для AngularJS, и для веб-разработчиков, поэтому, пожалуйста, будьте добрыми :) У меня есть простой проект на https://github.com/eroth/angular-web-app (основные файлы ниже), где я перехожу от первоначальной фиксации, используя учебник Google Maps чтобы преобразовать его в приложение AngularJS, но не смогли заставить его работать, хотя я подтвердил, что моя функция $scope.init() в моем файле MapController.js вызывается из моего файла map.html.Попытка получить простой пример Google Maps для работы с AngularJS
Мой вопрос в два раза: это случай, что что-то не так с моим кодом, или мне нужно что-то вроде этого (что выглядит очень хорошо): http://nlaplante.github.io/angular-google-maps/? Я работаю над включением этого в свой проект в другой филиал, но я пытаюсь выяснить, является ли это проблемой для моего существующего кода, или если мне понадобится что-то вроде этой библиотеки, чтобы заставить его работать с AngularJS. Если это последний, почему? Извиняется заранее, если это какая-то чрезвычайно простая ошибка, которую я делаю; поскольку я сказал, что я довольно новичок во всем этом, хотя я прошел несколько учебных пособий по AngularJS, и это кажется замечательным.
Это мой 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>
И это мой 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);
});
Заранее спасибо за любую помощь!