谷歌地圖後主辦

不角度渲染我在我的MVC 5項目中使用angular.js。還有用我的谷歌地圖後主辦

角視圖中的谷歌地圖，普萊舍看到谷歌地圖在指令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); 

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

我在HTML中使用這個directive

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

它工作正常本地主機。主機後此頁面的Web服務器，地圖無法正確渲染，它的

顯示錯誤

enter image description here

我已經谷歌地圖API密鑰並且在開發者沒有從哪裏來

控制檯

enter image description here

編輯：

控制器

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。

DotWiFi.controller('RouterCtrl', RouterCtrl);

這是谷歌地圖的參考腳本。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaS*************************"> </script>

您能否給我們提出建議。

謝謝

來源

2015-05-28 Ragesh S

這是一個依賴性錯誤：https：//docs.angularjs.org/error/$injector/unpr。請出示您的控制器。 – KayAnn

謝謝您寶貴的回覆。你是對的先生，我在app.js'myApp.controller（'RouterCtrl'，RouterCtrl）中缺少這一行;'沒有錯誤得到解決。但地圖仍然消失。 –

獲取服務器應用程序密鑰並用此替換此瀏覽器應用程序密鑰。 – KayAnn

THANK GOD。我明白了答案。託管後發生腳本引用錯誤。 app.js未包含在_Layout.cshtml中，這就是顯示此錯誤的原因。我直接添加腳本引用而不使用Bundle。現在解決了。

來源

2015-06-02 04:14:40

谷歌地圖後主辦

回答

相關問題