3

所以我使用来自 http://angular-ui.github.io/angular-google-maps/#!/api的 angular-google-maps 指令 ，我无法在我的地图实例上看到我的标记。我已经尝试了几乎所有事情，并且迫切需要建议。我尝试将 $scope.markers 移动到我的 $scope.map 对象，尝试将其移动到我的 $watch 函数中，然后将值直接添加到 html 中，但没有成功。我认为这与我必须添加的 $scope.control.refresh() 函数有关，以便地图在选项卡中完全加载（我正在使用角度引导选项卡）。

谢谢你的帮助！

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

5 回答 5

7

添加您的 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-23T23:06:20.503 回答
2

厌倦了 angular-google-maps，所以我切换到 ngMaps（github 中的 angularjs-google-maps 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-23T20:51:31.983 回答
1

它不适用于 ui-gmap-marker，但适用于 ui-gmap-marker。我认为这是因为 $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-23T20:12:22.903 回答
0

我今天遇到了这个问题，解决它所需要做的就是确保您包含idKey

于 2015-04-13T09:29:53.790 回答
0

仅需要 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-21T16:52:02.077 回答