Javascript 谷歌地图没有'；使用ui路由器时不显示

我试着将谷歌地图应用到我的AngularJS项目中

它在没有状态（ui路由器）的情况下运行良好，但当我尝试将其放入具有多个状态的项目中时，地图不会显示，但。。。它可以搜索一个地方，并获得经度，纬度，如图中所示

这是我的部分代码

服务：app.js

myApp.service('Map', function($q) {

    this.init = function() {
        var options = {
            center: new google.maps.LatLng(40.7127837, -74.00594130000002),
            zoom: 13,
            disableDefaultUI: true    
        }
        this.map = new google.maps.Map(
            document.getElementById("map"), options
        );
        this.places = new google.maps.places.PlacesService(this.map);
    }

    this.search = function(str) {
        var d = $q.defer();
        this.places.textSearch({query: str}, function(results, status) {
            if (status == 'OK') {
                d.resolve(results[0]);
            }
            else d.reject(status);
        });
        return d.promise;
    }

    this.addMarker = function(res) {
        if(this.marker) this.marker.setMap(null);
        this.marker = new google.maps.Marker({
            map: this.map,
            position: res.geometry.location,
            animation: google.maps.Animation.DROP
        });
        this.map.setCenter(res.geometry.location);
    }

});

控制器：app.js

myApp.controller('VenueController', function(Map,$rootScope, $scope, $auth, $state, $http) {

Map.init();

$scope.place = {};

$scope.search = function() {
    $scope.apiError = false;
    Map.search($scope.searchPlace)
    .then(
        function(res) { // success
            Map.addMarker(res);
            $scope.place.name = res.name;
            $scope.place.lat = res.geometry.location.lat();
            $scope.place.lng = res.geometry.location.lng();
        },
        function(status) { // error
            $scope.apiError = true;
            $scope.apiStatus = status;
        }
    );
}
});

HTML:venture.HTML

<div style="margin-top:20px;">
    <label> Location : </label>
    <form name="searchForm" novalidate ng-submit="search()">
    <div class="input-group">
        <input name="place" type="text" class="form-control" 
        ng-model="searchPlace" required autofocus />
        <span class="input-group-btn">
            <button class="btn btn-primary" 
            ng-disabled="searchForm.$invalid">Search</button>
        </span>
    </div>
</form>

<div id="map"></div>

<form name="resForm" class="form-horizontal" novalidate 
ng-submit="send()">
    <div class="form-group">
        <label for="resName" class="col-xs-2 control-label">Name</label>
        <div class="col-xs-10">
            <input name="resName" type="text" class="form-control" 
            ng-model="place.name" required />
        </div>
    </div>
    <div class="form-group">
        <label for="resLat" class="col-xs-2 control-label">Latitude</label>
        <div class="col-xs-10">
            <input name="resLat" type="number" class="form-control" 
            ng-model="place.lat" required />
        </div>
    </div>
    <div class="form-group">
        <label for="resLng" class="col-xs-2 control-label">Longitude</label>
        <div class="col-xs-10">
            <input name="resLng" type="number" class="form-control" 
            ng-model="place.lng" required />
        </div>
    </div>

地点：
搜寻
名称
纬度
经度

对不起，如果我给你看的代码很难读

---

请帮助，提前感谢

当包含map的

div

或者它的父对象，或者它的父对象（任何DOM前身）具有

display:none

样式时（我假设在更改状态时会发生：隐藏一些视图并显示其他视图），map视图将无法正确初始化。当可见性改变时，您必须在地图上触发

调整大小

事件。（我认为这种情况发生在您的案例中，从您提供的屏幕截图判断，API加载成功，只是视图未正确初始化）只需将此代码添加到

映射

服务：

this.resize = function() {
     if(this.map) google.maps.event.trigger(this.map, 'resize');
}

编辑

在您的代码中，地图位于

div id=“addVenue”

中。因此，您需要在显示div之后立即触发调整大小。要实现此目的，请将此功能添加到

VenueController

：

$scope.mapresize = function(){
    setTimeout(function(){ Map.resize(); }, 10);
}

当您要显示

addVenue

div时，在

venue.html

视图中调用它。找到一行链接到

href=“#addVenue”

，并将其更改为：

<div class="sm-st clearfix"  href="#addVenue" ng-click="mapresize()" data-toggle="tab">

---

它们导致谷歌地图无法正常运行。因为google maps在内部使用图像，如果您添加此约束，它们将被破坏。

您可以在plunkr中提供您的代码吗？您是否确保在调用resize时div是可见的？也许可以在上面加些时间来确定。无论如何，在这一点上，我无法进一步帮助您，我需要一个工作代码示例或至少主布局以及如何处理状态..我试过了，仍然不起作用。但是我试着把它放在默认页面上（没有状态变化），有一个红点出现，正如你在这张图片中看到的

img {
  max-width: 100% !important;
}