Question

我想在我的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消息。怎么解决？

Answer 1

通过callback参数传递的

displayMap函数应该可以从全局范围中看到，但在提供的示例中，它只能在def控制器的范围内访问。

在Angular app中，您可以通过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>

使用angularjs

1 个答案: