谷歌地圖無法加載angularjs

您好我一直在嘗試加載谷歌地圖到頁面上，當用戶點擊鏈接。我一直在嘗試關注Using google maps with angularjs and angular ui，但地圖未顯示。在本地主機上，我得到的錯誤是：沒有模塊：地圖測試。這裏沒有模塊暗示什麼？我一直遇到這樣的錯誤。它出於某種原因在JSfiddle上工作... The working example。谷歌地圖無法加載angularjs

HTML文件：

<div ng-app='maptesting'> 
    <div ng-controller="MapCtrl"> 
     <div id="map_canvas" ui-map="myMap" 
     style="height:300px;width:400px;border:2px solid #777777;margin:3px; border:1px solid" 
     ui-options="mapOptions" 
     ui-event="{'map-idle' : 'onMapIdle()'}" 
     > 
     </div> 

     <!--In addition to creating the markers on the map, div elements with existing google.maps.Marker object should be created to hook up with events --> 
     <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]" 
         ui-event="{'map-click': 'markerClicked(marker)'}"> 
     </div> 
    </div> 
</div>

JavaScript文件：

//Add the requried module 'angular-ui' as a dependency 
angular.module('maptesting', ['ui.map','ui.event']); 

function MapCtrl($scope) { 
    var ll = new google.maps.LatLng(13.0810, 80.2740); 
    $scope.mapOptions = { 
     center: ll, 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    //Markers should be added after map is loaded 
    $scope.onMapIdle = function() { 
     if ($scope.myMarkers === undefined){  
      var marker = new google.maps.Marker({ 
       map: $scope.myMap, 
       position: ll 
      }); 
      $scope.myMarkers = [marker, ]; 
     } 
    }; 

    $scope.markerClicked = function(m) { 
     window.alert("clicked"); 
    }; 

}

活生生的例子：在plunker：here
上的jsfiddle：here。

另一方面，使用angularui編寫google maps和angularjs集成，從零開始還是使用google maps with angular？ anuglarui一個看起來不錯，但是當我嘗試它時，它也不起作用。我在谷歌的一個圈子裏看到，它沒有更新一段時間，這可能是爲什麼它不能正常工作。

答案：是的，我錯過了所有腳本標記。即：

<script src="http://www.flocations.com/static/vendor/angular-ui/event/event.js"></script> 
    <script src="http://www.flocations.com/static/vendor/angular-ui/map/ui-map.min.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

來源

2013-11-02 DrowningInCode

建議你提供jsfiddle.net或plunker – charlietfl

現場演示中，我已經編輯它使鏈接更加清晰。他們迷失在一片混亂的文字中。謝謝 – DrowningInCode

如果它在jsfiddle中工作...在你的本地版本中必須是不同的東西 – charlietfl

Your Plunk不具有用於ui.map或ui.event<script></script>元件。例如，您可能要包括這些在你的<head>：

<script src="ui-event.js"></script> 
<script src="ui-map.js"></script>

來源

2013-11-02 20:36:04

谷歌地圖無法加載angularjs

回答

相關問題