Question

我正在尝试使用AngularJS加载Google Maps API：

<html data-ng-app="search-app">
<head data-ng-controller="GoogleMaps">
    <script ng-src="{{mapsUrl}}" type="text/javascript"></script>
....
</head>

和该部分的控制器：

search.controller('GoogleMaps', [
    '$scope','$sce',
    function GoogleMaps($scope,$sce) {
        var mapsUrl = '//maps.google.com/maps/api/js?sensor=false&key=my_api_key';
        $scope.mapsUrl = $sce.trustAsResourceUrl(mapsUrl);
    }
]);

但是当在搜索控制器中调用Google Map API时，它会抛出并出错

this.setMap不是函数

对于

function CustomMarker(latlng, map, args) {
    this.latlng = latlng;
    this.args = args;
    this.setMap(map);
}

但是当我用HTML标头中的完整URL替换{{mapsUrl}}时，它将起作用。

对此有何想法？

Answer 1

我最终在加载事件中将URL作为脚本附加到标头

function require(url, callback)
{
    var element = document.createElement("script");
    element.src = url;
    element.type="text/javascript";
    element.addEventListener('load', callback);
    document.getElementsByTagName("head")[0].appendChild(e);
}

AngularJS对Google Maps API的动态加载

1 个答案: