java - 如何使用 ionic 框架/添加带有多个标记的Google map /

我试图用多个标记显示地图，但总是出现白屏。我在下面附加了完整的代码。请让我知道我错了。如果我添加了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());

    });

这是我的
citymap.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>

这是我的
app.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:///android_asset/www/lib/ionic/js/ionic.bundle.js:7888:12
06-25 16:13:09.395: E/Web Console(14997):     at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9576:17
06-25 16:13:09.395: E/Web Console(14997):     at ensure (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9500:38)
06-25 16:13:09.395: E/Web Console(14997):     at module (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9574:14)
06-25 16:13:09.395: E/Web Console(14997):     at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11906:22
06-25 16:13:09.395: E/Web Console(14997):     at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:8147:20)
06-25 16:13:09.395: E/Web Console(14997):     at loadModules (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11890:5)
06-25 16:13:09.395: E/Web Console(14997):     at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11907:40
06-25 16:13:09.395: E/Web Console(14997):     at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:8147:20)
06-25 16:13:09.395: E/Web Console(14997):     at loadModules (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11890:5)

最佳答案

这是我的带有多个标记的谷歌地图的代码，它可以正常工作。我会得到纬度和经度的列表。

 var position = new google.maps.LatLng(lattitude,longitude);
         var content = email+","city;
         var marker = new google.maps.Marker({
                position:position,
                map:map,
                content:content,
                email:email
            });

         if(email == undefined || email == "")
             marker.setIcon('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_gray.png');
         else
             marker.setIcon('http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png');

        window.gmap_marker_list.push(marker);

关于java - 如何使用 ionic 框架/添加带有多个标记的Google map /，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31045548/