Question

我在MVC 5项目中使用Angular.js。在我的Angular视图中使用Google Map，请参阅app.js中的Google Map指令。

@if (Model.Persons.Count > 0)
{        
    var data= Model.Persons;
    foreach(var item in data){
      ...
    }
}
else
{
}

我在html

中使用此

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);

        //var marker = new google.maps.Marker({
        //    position: myCenter,
        //    animation: google.maps.Animation.BOUNCE
        //});

        //marker.setMap(map);

        //$scope.zoom = map.getZoom();

        ctrl.registerMap(map);

        //controlTemplate = document.getElementById('whereControl').innerHTML.trim();
        //controlElem = $compile(controlTemplate)(scope);
        //map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlElem[0]);

        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));
    }
};});

directive

它在本地主机中运行良好。在Web服务器中托管此页面后，映射无法正确呈现并显示错误：

enter image description here

我已经拥有Google Map API密钥，而开发人员中没有推荐人

控制台

enter image description here

修改

控制器

<div class="col-sm-10" style="height:200px;" googlemap latitude="43.074688" longitude="-89.384294"></div>

我在function RouterCtrl($scope, $http, $routeParams) { var _RouterId = $routeParams.routerid; $scope.models = { LocationName: $scope.LocationName, RouterID: $scope.RouterID, } $scope.SaveRouter = function () { var Router = { Id: 0, Location: $scope.LocationName, Latitude: $scope.latitude, Longitude: $scope.longitude, SerialNumber: $scope.RouterID, } $http.post("Router/Create", { model: Router }).success(function (data) { alert('success'); }); } // End // Router List link $scope.RoutersList = function () { window.location.href = '#/listrouter'; }}RouterCtrl.$inject = ['$scope', '$http', '$routeParams'];中缺少控制器声明。

app.js

这是Google Map的推荐脚本。

DotWiFi.controller('RouterCtrl', RouterCtrl);

Answer 1

我得到了答案。托管后发生脚本引用错误。 app.js中未包含_Layout.cshtml，这是显示此错误的原因。我直接添加脚本引用而不使用Bundle。现在它已经解决了。

托管后，Google地图无法在Angular视图中呈现

1 个答案: