Angularjs 谷歌地图 API 集成

Question

我正在尝试在 Angular JS 中添加一个谷歌地图......并且一直在努力。我不想使用 Angular 依赖项之一，而是在 Google JS API site 上模拟“异步延迟” .

我是 Angularjs 的新手，但了解将事物分配给 Controller 范围的概念。很确定这只是一些愚蠢的东西，但不确定是什么......任何帮助都会很棒:-)

    (function () {
  'use strict';
  app.controller('travelCtrl', ['$scope', function($scope) {

    $scope.injectScript = function(element) {
        var scriptTag = angular.element(document.createElement('script'));
        scriptTag.attr('charset', 'utf-8');
        scriptTag.attr('src', 'https://maps.googleapis.com/maps/api/js?key=MYKEY');
        element.append(scriptTag);
        return {
          link: function(scope, element) {
            injectScript(element)}}};

    $scope.initMap = function() {
            var uluru = {lat: -25.363, lng: 131.044};
            var map = new google.maps.Map(document.getElementById('kc-map'), {
            zoom: 4,
            center: uluru
          });
        };
    }]);
  })();

HTML

<div ng-controller="travelCtrl" id="kc-map"></div>

Answer 1

想通了...

  app.controller('travelCtrl', ['$scope', function($scope) {
    $scope.initialize = function() {
         $scope.mapOptions = {
             zoom: 8,
             center: new google.maps.LatLng(22.649907498685803, 88.36255413913727)
         };
         $scope.map = new google.maps.Map(document.getElementById('kc-map'), $scope.mapOptions);
     }

     $scope.loadScript = function() {
         var script = document.createElement('script');
         script.type = 'text/javascript';
         script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyD-5e8hV-uCuE1pEgTyMhk_gJJPK2f3F5A&callback=initialize';
         document.body.appendChild(script);
         setTimeout(function() {
             $scope.initialize();
         }, 500);
     }
    }]);

将其添加到外部 div。

ng-init="loadScript()"

回答感谢this post