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>

ジャバスクリプト

(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

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>

ジャバスクリプト

(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 に答える
0

必要なプロパティは「idkey」と「coords」の 2 つだけで、両方ともマークアップで設定する必要があります

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

それぞれのスペルを確認してください...また、スコープを消化するために必要な純粋なjs(イベントハンドラーなどから)を介してマーカーが追加された場合。

ところで、マーカーを ng-repeat することができます

<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 に答える