Получение __ не является функцией ошибки invalidvalue при попытке googlemaps с angularjs

Я хочу отобразить карту на моей странице angularJS, как показано ниже.Получение __ не является функцией ошибки invalidvalue при попытке googlemaps с angularjs

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="js/angular.min.js"></script> 
</head> 
<body ng-app="abc"> 
<div id="controller" ng-controller="def as ctrl"> 
    <div id="googlemap" style="height:100%; width:100%"></div> 
</div> 
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/scripts.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=displayMap"></script> 
</body> 
</html>

И мой файл scripts.js выглядит следующим образом.

var mainApp = angular.module('abc',[]); 
mainApp.controller('def', function($scope,$http) { 

    this.displayMap=function() { 
      var mapOptions = { 
       zoom: 4, 
       center: new google.maps.LatLng(40.0000, -98.0000), 
       mapTypeId: google.maps.MapTypeId.TERRAIN 
      } 

      $scope.googlemap = new google.maps.Map(document.getElementById('googlemap'), mapOptions); 
     } 

}

Я получаю displayMap не является функцией InvalidValueError message. Как это можно решить?

источник

2017-02-17 Satya Narayana

displayMap функция передается с помощью параметра обратного вызова, как ожидается, будет видно из глобального масштаба но в указанном примере она доступна только в рамках def контроллера.

В угловом приложении вместо вызова функция displayMap через callback параметр, который вы можете вызвать его из регулятора, как это:

google.maps.event.addDomListener(window, 'load', displayMap);

Пример

angular.module('mapApp', []) 
 

 
    .controller("mapCtrl", function ($scope, $http) { 
 
     
 
     var displayMap = function (data) { 
 
      var mapOptions = { 
 
       zoom: 4, 
 
       center: new google.maps.LatLng(48.209500, 16.370691), 
 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
 
      } 
 
      var map = new google.maps.Map(document.getElementById("map_div"), mapOptions); 
 
     }; 
 

 
     google.maps.event.addDomListener(window, 'load', displayMap); 
 

 
    });

#map_div { 
 
     height: 280px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
<script src="https://maps.google.com/maps/api/js"></script> 
 
<script src="app.js"></script> 
 

 

 
<div ng-app="mapApp" ng-controller="mapCtrl"> 
 
    <div id="map_div" ></div> 
 
</div>

источник

2017-02-22 16:19:59

Получение __ не является функцией ошибки invalidvalue при попытке googlemaps с angularjs

ответ

Смежные вопросы