маркеры с угловыми google-картами не отображаются

Так что я использую директиву угловых google-maps от http://angular-ui.github.io/angular-google-maps/#!/api , и я не могу видеть мои метки на моем экземпляре карты. Я пробовал почти все и отчаянно нуждаюсь в советах. Я попытался переместить $ scope.markers в свой объект $ scope.map, попытался переместить его внутри моей функции $ watch и добавить значения непосредственно в html без везения. Я думаю, что это имеет какое-то отношение к функции $ scope.control.refresh(), которую я должен был добавить, чтобы карта полностью загрузилась внутри вкладки (я использую вкладки углового бутстрапа).маркеры с угловыми google-картами не отображаются

Спасибо за помощь!

HTML

<div ng-controller="LocationCtrl" ng-cloak> 
    <div class="map-canvas" ng-if="locationActive"> 
    <ui-gmap-google-map draggable="true" center='map.center' zoom='map.zoom' control="control"> 
     <ui-gmap-marker coords="markers.coords" idKey="markers.idKey"> 
     </ui-gmap-marker> 
    </ui-gmap-google-map> 
    </div> 
</div>

JAVASCRIPT

(function() { 
    'use strict'; 

    var locationCtrl = function($scope, uiGmapIsReady, $timeout) { 
    $scope.map = { 
     center: { latitude: 36.132411, longitude: -80.290481 }, 
     zoom: 15 
    }; 

    $scope.control = {}; 

    $scope.active = $scope.$parent.active; 
    $scope.locationActive = $scope.active().active; 
    $scope.$watch($scope.active, function() { 
     $timeout(function() { 
     uiGmapIsReady.promise().then(function() { 
      $scope.control.refresh(); 
      var map = $scope.control.getGMap(); 
      $scope.markers= { 
      idKey: 1, 
      coords: { 
       latitude: 36.132411, 
       longitude: -80.290481 
      } 
      }; 
     }); 
     }, 0); 
    }); 
    }; 
    angular.module('boltlandApp').controller('LocationCtrl', locationCtrl); 
})();

источник

2015-01-23 ibolton336

Он не работает с Ui-GMAP-маркер, но отлично работает с UI-GMAP-маркеров. Я думаю, что это потому, что $ scope.markers не определены вначале.

<!doctype html> 
 
<html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script> 
 
     <script src="https://raw.githubusercontent.com/lodash/lodash/2.4.1/dist/lodash.min.js"></script> 
 
     <script src="https://raw.githubusercontent.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script> 
 
     <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script> 
 
     <style> 
 
     .angular-google-map-container { 
 
      width: 500px; 
 
      height: 500px; 
 
     } 
 
     </style> 
 
    </head> 
 
    <body ng-app="boltlandApp"> 
 
     <div ng-controller="LocationCtrl"> 
 
      <div class="map-canvas"> 
 
      <ui-gmap-google-map draggable="true" center='map.center' zoom='map.zoom' control="control"> 
 
       <ui-gmap-markers models="markers" coords="'coords'" idKey="'idKey'"> 
 
       </ui-gmap-markers> 
 
      </ui-gmap-google-map> 
 
      </div> 
 
     </div> 
 
    </body> 
 
    <script> 
 
    
 
    (function() { 
 
     'use strict'; 
 

 
     var locationCtrl = function($scope, uiGmapIsReady, $timeout) { 
 
     $scope.markers = []; 
 
     $scope.map = { 
 
      center: { latitude: 36.132411, longitude: -80.290481 }, 
 
      zoom: 15 
 
     }; 
 

 
     $scope.control = {}; 
 

 
     $scope.$watch($scope.active, function() { 
 
      $timeout(function() { 
 
      uiGmapIsReady.promise().then(function() { 
 
       $scope.markers.push({ 
 
       idKey: 1, 
 
       coords: { 
 
        latitude: 36.132411, 
 
        longitude: -80.290481 
 
       }, 
 
       
 
       }); 
 
      }); 
 
      }, 0); 
 
     }); 
 
     }; 
 
     angular.module('boltlandApp', ['uiGmapgoogle-maps']) 
 
     angular.module('boltlandApp').controller('LocationCtrl', locationCtrl); 
 
    })(); 
 
    </script> 
 
</html>

источник

2015-01-23 20:12:22

подавалась с угловыми-Google-картах, поэтому я перешел на ngMaps (angularjs-Google-картах в GitHub https://ngmap.github.io/maptypes.html#/maptype-image#maptype-image)

HTML

<div ng-controller="LocationCtrl" ng-cloak> 
    <map class="map_canvas" ng-if="locationActive" ng-cloak center="32, -80" zoom="15"> 
    <marker position="32, -80" title="angularTestTitle"></marker> 
    </map> 
</div>

JAVASCRIPT

(function() { 
    'use strict'; 

    var locationCtrl = function($scope, $timeout) { 

    $scope.active = $scope.$parent.active; 
    $scope.$watch($scope.active, function() { 
     if($scope.active().title === "Location") { 
     $scope.locationActive = true; 
     } else { 
     $scope.locationActive = false; 
     } 
     $timeout(function() { 
     }, 0); 
    }); 
    }; 
    angular.module('boltlandApp').controller('LocationCtrl', locationCtrl); 
})();

источник

2015-01-23 20:51:31 ibolton336

Добавить в ваш HTML:

<ui-gmap-markers models="markers" coords="'coords'" idKey="'idKey'"> 
      </ui-gmap-markers>

Javascript:

Добавьте это в ваш $scope.$watch($scope.active, function() {

uiGmapIsReady.promise().then(function() { 
     $scope.markers.push({ 
      idKey: 1, 
       coords: { 
       latitude: 36.132411, 
       longitude: -80.290481 
     },   
});

источник

2015-01-23 23:06:20 AniV

Я имел этот вопрос сегодня, и все, что требовалось, чтобы исправить это, чтобы обеспечить вы включаете idKey

источник

2015-04-13 09:29:53 GSof

Только 2 объекта недвижимости обязательны для заполнения "idkey" и "coords" и оба они должны быть установлены в разметке

<ui-gmap-marker coords="marker.coords" idkey="marker.id"> 
               </ui-gmap-marker>

и, пожалуйста, проверьте орфографию для каждого из них ... Кроме того, если маркер добавляется с помощью некоторых чистых JS (от обработчика событий или что-то вроде этого), необходимого для переваривания область.

Кстати, вы можете нг-повторить маркеры

<ui-gmap-marker ng-repeat="m in map.markers" coords="m.coords" idkey="m.id" options="m.options" events="m.events"> 
               </ui-gmap-marker>

источник

2015-10-21 16:52:02 BotanMan

маркеры с угловыми google-картами не отображаются

ответ

Смежные вопросы