Google Maps无法使用angularjs加载

溺水代码

嗨,我一直在尝试在用户单击链接时将Googlemaps加载到页面上。我一直在尝试将google maps与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的google map来编码google map和angularjs的集成Anuglarui看起来不错,但是当我尝试时它也没有用。我在一个Google圈子中看到,它有一段时间没有更新了,这可能就是为什么它无法正常运行的原因。

答:是的,我所缺少的只是脚本标签。即:

 <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> 
泰勒·艾希(Tyler Eich)

您的Plunk没有或的<script></script>元素例如,您可能希望将这些包括在您的中ui.mapui.event<head>

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用 AngularJS 动态加载 Google Maps API

来自分类Dev

无法使AngularJS Google Map居中/ AngularJS Google Maps API的使用

来自分类Dev

无法使用Google Maps Data Layer从源加载geojson

来自分类Dev

Google Maps中的信息窗口无法加载

来自分类Dev

Google Maps API无法正确加载

来自分类Dev

无法加载FragmentActivity,Google Maps v 2

来自分类Dev

为什么使用Google Maps API无法在iOS中加载Google Map?

来自分类Dev

Google Maps无法使用jQuery

来自分类Dev

Google Maps:使用coffeescript异步加载

来自分类Dev

使用AngularJS在Google Maps中实现标记

来自分类Dev

Google Maps-无法加载Android应用-空对象引用

来自分类Dev

无法为Json Web服务加载Ajax Google Maps Gmap

来自分类Dev

Google Maps v2无法在某些设备上加载

来自分类Dev

Google Maps API无法将地图加载到页面

来自分类Dev

Google Maps在Bootstrap 3.0模态中无法完全加载

来自分类Dev

无法为Json Web服务加载Ajax Google Maps Gmap

来自分类Dev

AngularJS错误:[ng:areq]参数'fn'不是函数,使用Google Maps SDK异步加载程序获取了字符串

来自分类Dev

AngularJS错误:[ng:areq]参数'fn'不是函数,使用Google Maps SDK异步加载程序获取了字符串

来自分类Dev

Google Maps的AngularJS路由

来自分类Dev

Google Maps的AngularJS路由

来自分类Dev

AngularJS加载Google Api

来自分类Dev

使用AWS Cloudfront进行Google Maps异步加载

来自分类Dev

使用Angular在页面加载时访问Google Maps API

来自分类Dev

使用Ajax加载Google Maps和获取标记

来自分类Dev

异步加载Google Maps API

来自分类Dev

动态加载Google Maps API

来自分类Dev

Google Maps何时加载数据?

来自分类Dev

Google Maps何时加载数据?

来自分类Dev

动态加载Google Maps API

Related 相关文章

热门标签

归档