AngularJS 프로젝트로 간단한 Google Maps 프로젝트 (사이트의 예에서 그대로)를 마이그레이션하려고합니다. 먼저 AngularJS와 web dev에 익숙하다는 말로 머리말을 붙이십시오. 친절하시기 바랍니다 ^^ Google지도 자습서를 사용하여 초기 커밋에서 이동하는 간단한 프로젝트가 https://github.com/eroth/angular-web-app (아래 주요 파일)입니다. AngularJS 앱으로 변환하려고 시도했지만 작동하도록 만들지 못했습니다. 내 mapController.js 파일의 $scope.init() 함수가 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);
});
감사합니다!