ng-map 在 ui 中显示部分地图

Question

我正在使用 ng map 并得到 ui 一半的屏幕，但没有得到完整的 div

var app = angular.module('app', ['ngMap']);

app.controller('ctrl', ['$scope', 'ngMap','$timeout', function($scope, ngMap,$timeout) {
  NgMap.getMap().then(function(map) {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });
  $timeout(function() {
    NgMap.getMap().then(function(map) {
      google.maps.event.trigger(map, 'resize');
    });
  }, 500);
}]);

#ng-map {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <div map-lazy-load="https://maps.google.com/maps/api/js" id="ng-map" map-lazy-load-params="https://maps.google.com/maps/api/js?key=AIzaSyB4qnR0XX1tetbLUxSSLVWKi_E4WzGi1tk">
    <ng-map zoom="4">

    </ng-map>
  </div>
</div>

我不知道为什么会出现此错误。请帮助我

Answer 1

首先，我认为您将其设置在错误的元素上，您需要将其设置在#ng-map 内的元素上 div 尝试将您 CSS 更改为（也尽量不要使用 !importants):

#ng-map ng-map{
  width: 100%;
  height: 100%;
  position: absolute;
}

之后，您可以尝试设置：

default-style="false"

在你的 ng-map 指令上，也尝试使用内联样式，这里是示例：

<ng-map zoom="4" default-style="false">
</ng-map>

还有傻瓜： http://plnkr.co/edit/Qh2O0W?p=preview

ng-map 在 ui 中显示部分地图

ng-map shows partial map in ui

google-maps

angularjs

ng-map

angular-google-maps