角度谷歌地图标记未显示

2024-01-09

所以我正在使用 angular-google-maps 指令http://angular-ui.github.io/angular-google-maps/#!/api http://angular-ui.github.io/angular-google-maps/#!/api我无法在地图实例上看到我的标记。我已经尝试了几乎所有方法,并且迫切需要建议。我尝试将 $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);
})();

添加到您的 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
        },        
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

角度谷歌地图标记未显示 的相关文章

随机推荐