使用ui-router时不显示Google地图

Question

我试图通过此链接将google map应用于我的AngularJS项目

而且它在没有状态（ui-router）的情况下也能很好地工作，但是当我尝试将其放入具有多个状态的项目中时，地图不会显示，但是...它可以搜索位置并获得经度，纬度，如您所见在图片中

这是我的代码的一部分

服务：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：venue.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>

抱歉，如果我给您显示的代码难以阅读

请帮助，在此先谢谢

Answer 1

当包含地图的div或其父级或父级的父级（任何DOM的前身）具有display:none样式（更改状态时我认为会发生这种情况：隐藏一些视图并显示其他视图）时，地图视图将不会初始化正常。 当可见性更改时，您必须在地图上触发resize事件。 （我认为这是在您的情况下发生的，从您提供的屏幕快照来看，API已成功加载，只有未正确初始化视图）将以下代码添加到Map服务：

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">

也！！ 您的应用程序还有另一个问题。 在style.css中，删除以下3行：

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

它们会导致Google地图无法正常运行。 由于google maps内部使用图像，如果您添加此约束，它们将中断。