如何使用离子框架添加带有多个标记的谷歌地图/

Question

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

Answer 1

这是我的带有多个标记的谷歌地图代码。我得到纬度和经度列表。

 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); 

Answer 2

您可以使用“for”来做到这一点。例如：

google.maps.event.addListener($scope.map, 'idle', function() {

    var marker;
    for (var i = 0; i < localizacion.length; i++) {

      var latitud = localizacion[i].lat;
      var longitud = localizacion[i].long;
      var latLng = new google.maps.LatLng(latitud, longitud);
      marker = new google.maps.Marker({
        map: $scope.map,
        position: latLng
      });
    }