如何将这个脚本从index.html重写到angularjs app.js中

Question

目前，我的index.html中的head选项卡中有这个脚本。我应该把它移到app.js上，对吧？不管怎样，你能帮我吗？如何修改脚本以适应app.js？注意：我使用的是angular.js，所以app.js是angular.module

    <script>
  function initialize() {
      var mapOptions = {
          zoom: 14,
          center: new google.maps.LatLng(59.3332346,18.0280576)
      };
      var map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
  }
  function loadScript() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
              'callback=initialize';
      document.body.appendChild(script);
  }
  window.onload = loadScript;

Answer 1

将loadScript移动到文档的HEAD中的实际<script>标记中。没有必要使用JavaScript加载脚本。

一旦你完成了，为你的地图创建一个指令：

app.directive('map', function mapDirective() {
    return {
        restrict: 'A',
        scope: {
            options: '=map'
        },
        link: function link(scope, element) {
            new google.maps.Map(element[0], scope.options);
        }
    }
});

设置HTML文档以使用指令：

<section ng-controller="MapController">
    <div data-map="options"></div>
</section>

然后最后创建您的控制器以传入地图选项：

app.controller('MapController', function MapController($scope) {
    $scope.options = {
        zoom: 14,
        center: new google.maps.LatLng(59.3332346,18.0280576)
    }
});