java如何使用ionic框架添加带有多个标记的google地图/

1 周，5 日 Questions & Answers 3676

我试图用多个标记显示地图，但总是出现一个白色屏幕。我在下面附上了我的完整代码。请告诉我哪里错了。如果我添加sipmle地图，那么它将成功集成，但如果我尝试添加带有多个标记的地图，它将显示白色屏幕

    CONTROLLERS.JS

     var cities = [
        {
            city : 'chandigarh',
            desc : 'Test',
            lat : 52.238983,
            long : -0.888509 
        },
        {
            city : 'chennai',
            desc : 'Test',
            lat : 52.238168,
            long : -52.238168
        },

    ];

    .controller('MapCltrl', function($scope,$http,$window, $ionicLoading, $compile,$ionicLoading) {
        // Map Settings //
        $scope.initialize = function() {
             var latitude;
             var longitude;
            var myLatlng = new google.maps.LatLng(30.444,
                    76.435);

            var mapOptions = {
                center : myLatlng,
                 mapTypeId: google.maps.MapTypeId.ROADMAP,
                zoom : 8,
                mapTypeId : google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map1"), mapOptions);
          // Geo Location /
            navigator.geolocation.getCurrentPosition(function(pos) {
                map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
                var myLocation = new google.maps.Marker({
                    position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                    map: map,
                    animation: google.maps.Animation.DROP,
                    title: "My Location"
                });
            });
            $scope.map = map;
            // Additional Markers  FOR THE DIFFERENT CITIES//
            $scope.markers = [];
            var infoWindow = new google.maps.InfoWindow();
            var createMarker = function (info){
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(info.lat, info.long),
                    map: $scope.map,
                    animation: google.maps.Animation.DROP,
                    title: info.city
                });
                marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';
                google.maps.event.addListener(marker, 'click', function(){
                    infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
                    infoWindow.open($scope.map, marker);
                });
                $scope.markers.push(marker);
            }  

// FOR LOOP TO ARRAY OF CITIES
            for (i = 0; i < cities.length; i++){
                createMarker(cities[i]);
            }

        };
        google.maps.event.addDomListener(document.getElementById("map1"), 'load', $scope.initialize());

    });

这是我的城市地图。html

-->；

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<ion-header-bar class="bar-positive">
<h1 class="title">Map</h1>
</ion-header-bar>

<ion-view title="Map Overview">
<ion-content ng-controller="MapCltrl" ng-init="initialize()">

<div id="map1" data-tap-disabled="true"></div>

</ion-content> 
 <ion-footer-bar class="bar-stable">
                <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
             </ion-footer-bar>

</ion-view>

这是我的应用程序。js

.state('auth.citiesmaps', {
        url : '/citiesmaps',
        views : {
            'menuContent' : {
                templateUrl : 'templates/auth-citiesmaps.html',
                controller : 'MapCltrl'
            }
        }
    })

以下是我的日志错误：

06-25 16:13:09.395: E/Web Console(14997): Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
06-25 16:13:09.395: E/Web Console(14997): Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
06-25 16:13:09.395: E/Web Console(14997): Error: [$injector:nomod] Module 'starter.controllers' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
06-25 16:13:09.395: E/Web Console(14997): http://errors.angularjs.org/1.3.6/$injector/nomod?p0=starter.controllers
06-25 16:13:09.395: E/Web Console(14997):     at file:///安卓_asset/www/lib/ionic/js/ionic.bundle.js:7888:12
06-25 16:13:09.395: E/Web Console(14997):     at file:///安卓_asset/www/lib/ionic/js/ionic.bundle.js:9576:17
06-25 16:13:09.395: E/Web Console(14997):     at ensure (file:///安卓_asset/www/lib/ionic/js/ionic.bundle.js:9500:38)
06-25 16:13:09.395: E/Web Console(14997):     at module (file:///安卓_asset/www/lib/ionic/js/ionic.bundle.js:9574:14)
06-25 16:13:09.395: E/Web Console(14997):     at file:///安卓_asset/www/lib/ionic/js/ionic.bundle.js:11906:22
06-25 16:13:09.395: E/Web Console(14997):     at forEach (file:///安卓_asset/www/lib/ionic/js/ionic.bundle.js:8147:20)
06-25 16:13:09.395: E/Web Console(14997):     at loadModules (file:///安卓_asset/www/lib/ionic/js/ionic.bundle.js:11890:5)
06-25 16:13:09.395: E/Web Console(14997):     at file:///安卓_asset/www/lib/ionic/js/ionic.bundle.js:11907:40
06-25 16:13:09.395: E/Web Console(14997):     at forEach (file:///安卓_asset/www/lib/ionic/js/ionic.bundle.js:8147:20)
06-25 16:13:09.395: E/Web Console(14997):     at loadModules (file:///安卓_asset/www/lib/ionic/js/ionic.bundle.js:11890:5)

Python中文网

有 Java 编程相关的问题?

java如何使用ionic框架添加带有多个标记的google地图/

共 (1) 个答案

# 1 楼答案