Angularjs谷歌地图API集成

我想添加一个谷歌地图在角JS ...并一直在挣扎。我不想使用其中一种角度依赖性，但模拟Google JS API site上的“异步延迟”。Angularjs谷歌地图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>

来源

2017-10-13 Kyle Cannon

恰好是不工作怎么办？地图未加载？ – kappaallday

地图未加载。页面上没有错误消息，只是不加载。 –

做到这一点：'angular.element（element）.append（scriptTag）;'MKEY似乎无效api key tho – kappaallday

想通了......

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

来源

2017-10-14 17:43:26

Angularjs谷歌地图API集成

回答

相关问题