Angularjs Google Map API集成

凯尔·加农

我正在尝试在有角JS中添加Google地图...并且一直在努力。我不想使用角度依赖关系之一，而是在Google JS API网站上模拟“异步延迟” 。

我是Angularjs的新手，但是有了将事物分配给控制器范围的概念。可以肯定的是，这只是一个愚蠢的东西，但是不知道是什么...任何帮助都会很棒的:-)

    (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>

凯尔·加农

弄清楚了...

  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);
     }
    }]);