Javascript 尝试使用AngularJS获得简单的Google地图示例_Javascript_Html_Google Maps_Angularjs_Web Applications

Javascript 尝试使用AngularJS获得简单的Google地图示例

javascript html google-maps angularjs web-applications

Javascript 尝试使用AngularJS获得简单的Google地图示例,javascript,html,google-maps,angularjs,web-applications,Javascript,Html,Google Maps,Angularjs,Web Applications,我正在尝试将一个简单的Google地图项目（从他们网站上的一个例子中直接完成）迁移到AngularJS项目。让我先说一下，我对AngularJS和web开发都是新手，所以请客气一点：）我在（下面的主文件）上有一个简单的项目，从使用Google地图教程的初始提交到尝试将其转换为AngularJS应用程序，但还没能让它工作，尽管我已经验证了我的$scope.init（）正在从my map.html文件调用my MapController.js文件中的函数我的问题有两个：是我的代码有问题，还是我需要

我正在尝试将一个简单的Google地图项目（从他们网站上的一个例子中直接完成）迁移到AngularJS项目。让我先说一下，我对AngularJS和web开发都是新手，所以请客气一点：）我在（下面的主文件）上有一个简单的项目，从使用Google地图教程的初始提交到尝试将其转换为AngularJS应用程序，但还没能让它工作，尽管我已经验证了我的

$scope.init（）

正在从my map.html文件调用my MapController.js文件中的函数

我的问题有两个：是我的代码有问题，还是我需要这样的东西（看起来很好）：？我正在努力将它合并到我在另一个分支上的项目中，但我试图弄清楚这是否是我现有代码的问题，或者我是否需要类似于这个库的东西来让它与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>

提前感谢您的帮助

您的代码有几处错误。首先，您已经在

mainController

中调用了作用域的

init（）

函数，方法是使用

nginit

在DOM中定义它

<div class="container main-frame" ng-app="WebApp" ng-controller ="mainController" ng-init="init()">

至于你问题的第二部分，我肯定会考虑使用已经构建的东西。我没有使用你链接到的库，但是如果你说它很好，为什么要尝试重新发明轮子呢

<div class="container main-frame" ng-app="WebApp" ng-controller ="mainController" ng-init="init()">

#map-canvas { height : 200px; }
/* if you want to set the height as a percentage of the parent div, remember to give a height to the parent div as well */