角谷歌，地图标记没有显示出来 [英] angular-google-maps markers not showing up

问题描述

所以我使用从角谷歌，地图指示
http://angular-ui.github.io/angular-google-图/＃！/ API
而我无法看到我的地图实例我的标记。我曾尝试刚才的一切和我绝望的意见。我试图把$ scope.markers到我的$ scope.map对象时，试图移动它我的$的手表功能里面，直接添加值到没有运气的HTML。我想这有什么做的$ scope.control.refresh（）函数，我不得不为了添加对映射到一个标签里面完全加载（我用的角引导选项卡）。

感谢您的帮助！

HTML

 ＆LT; D​​IV NG控制器=LocationCtrlNG-斗篷＆GT;
  ＆LT; D​​IV CLASS =地图帆布NG-IF =locationActive＆GT;
    ＆LT; UI-GMAP，谷歌地图可拖动=真正的中心='map.center'缩放='map.zoom'控制=控制＆GT;
      ＆LT; UI-GMAP-标记COORDS =markers.coordsidKey =markers.idKey＆GT;
      ＆LT; / UI-GMAP-标记＆GT;
    ＆LT; / UI-GMAP，谷歌地图＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

JAVASCRIPT

 （函数（）{
  使用严格的;  VAR locationCtrl =功能（$范围，uiGmapIsReady，$超时）{
    $ scope.map = {
      中心：{纬度：36.132411，经度：-80.290481}，
      变焦：15
    };    $ scope.control = {};    $ scope.active = $ $范围parent.active。
    $ scope.locationActive = $ scope.active（）的活性。
    $范围。$腕表（$ scope.active，函数（）{
      $超时（函数（）{
        uiGmapIsReady.promise（）。然后（函数（）{
          $ scope.control.refresh（）;
          变种地图= $ scope.control.getGMap（）;
          $ scope.markers = {
            idKey：1，
            COORDS：{
              纬度：36.132411，
              经度：-80.290481
            }
          };
        }）;
      }，0）;
    }）;
  };
  angular.module（'boltlandApp'）控制器（'LocationCtrl'，locationCtrl）。
}）（）;
 

解决方案

添加在你的HTML：

 ＆LT; UI-GMAP标记物模型=标志COORDS ='COORDS'idKey ='idKey'＆GT;
          ＆LT; / UI-GMAP-标记＆GT;
 

使用Javascript：

添加这是你的 $范围。$表内（$ scope.active，函数（）{

  uiGmapIsReady.promise（）。然后（函数（）{
         $ scope.markers.push（{
            idKey：1，
              COORDS：{
                纬度：36.132411，
                经度：-80.290481
        }，
}）;
 

So I am using the angular-google-maps directive from http://angular-ui.github.io/angular-google-maps/#!/api and I am unable to see my markers on my map instance. I have tried just about everything and am desperate for advice. I have tried moving the $scope.markers to my $scope.map object, tried moving it inside my $watch function, and adding the values directly into the html with no luck. I am thinking this has something to do with the $scope.control.refresh() function i had to add in order for the map to fully load inside a tab (i am using angular-bootstrap tabs).

Thanks for any help!

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

解决方案

Add in your HTML:

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

Javascript:

Add this inside your $scope.$watch($scope.active, function() {

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

这篇关于角谷歌，地图标记没有显示出来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！