1

嗨，当用户单击链接时，我一直在尝试将 Googlemaps 加载到页面上。我一直在尝试使用带有 angularjs 和 angular ui 的谷歌地图，但地图没有出现。在本地主机上，我得到的错误是：没有模块：地图测试。这里没有模块意味着什么？我一直遇到这样的错误。出于某种原因，它适用于 JSfiddle...工作示例。

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：这里
在 JSfiddle：这里。

另一方面，使用 angularui 从头开始​​或使用带有 angular的谷歌地图来编码谷歌地图和 angularjs 集成会更好吗？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>
4

1 回答 1

0

您的 Plunk没有or的<script></script>元素。例如，您可能希望将这些包含在您的:ui.mapui.event<head>

<script src="ui-event.js"></script>
<script src="ui-map.js"></script>
于 2013-11-02T20:36:04.490 回答