javascript - app.directive Google map 在托管后无法工作

Question

我正在使用 angularjs 处理 MVC 5 Web 应用程序。有一个谷歌地图。

在我的 Angular View 中，我使用 app.js 中的指令来显示 google map 。

请参阅我的下面的代码。

app.js

myApp.directive('googlemap', function ($compile) {
return {
    controller: function ($scope) {
        var map;

        this.registerMap = function (myMap) {
            var center = myMap.getCenter(),
              latitude = center.lat(),
              longitude = center.lng();
            //zoom = center.zoom();

            map = myMap;
            $scope.latitude = latitude;
            $scope.longitude = longitude;
            $scope.zoom = map.getZoom();
        };

        $scope.$watch('latitude + longitude', function (newValue, oldValue) {
            if (newValue !== oldValue) {
                var center = map.getCenter(),
                  latitude = center.lat(),
                  longitude = center.lng();
                if ($scope.latitude !== latitude || $scope.longitude !== longitude)
                    map.setCenter(new google.maps.LatLng($scope.latitude, $scope.longitude));
            }
        });
    },
    link: function (scope, elem, attrs, ctrl) {
        var mapOptions,
          latitude = attrs.latitude,
          longitude = attrs.longitude,
          //controlTemplate,
          //controlElem,
          map;

        // parsing latLong or setting default location
        latitude = latitude && parseFloat(latitude, 10) || 43.074688;
        longitude = longitude && parseFloat(longitude, 10) || -89.384294;

        mapOptions = {
            zoom: 8,
            disableDefaultUI: true,
            center: new google.maps.LatLng(latitude, longitude),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(elem[0], mapOptions);

        ctrl.registerMap(map);

        function centerChangedCallback(scope, map) {
            return function () {
                var center = map.getCenter();
                scope.latitude = center.lat();
                scope.longitude = center.lng();
                scope.zoom = map.getZoom();
                if (!scope.$$phase) scope.$apply();
            };
        }
        google.maps.event.addListener(map, 'center_changed', centerChangedCallback(scope, map));
    }
};
});

HTML

<div style="height:400px;" googlemap latitude="43.074688" longitude="-89.384294"></div>

它在本地主机上运行良好。但是当我在网络服务器上托管此页面时，

Google Chrome 控制台中显示错误:

我发现两个页面(本地主机和托管)的 view-source: 存在差异页)。本地主机和托管页面中的脚本引用很少。

您对这个问题有什么建议吗？

Answer 1

您好，我很确定问题出在加载您的脚本上，请交叉检查脚本在主机中的位置。