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

    });

这是我的 citiesmap.html

- ＆GT;

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

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

2 个答案: