Question

目前我在头部标签内的index.html中有这个脚本。我应该把它移到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移动到文档<script>内的实际HEAD标记中。不必使用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)
    }

});

如何将此脚本从index.html重写为angularjs app.js

1 个答案: