javascript - 使用 ui-router 时谷歌地图不显示

Question

我试图从这个 Link 将谷歌地图应用到我的 AngularJS 项目

它在没有状态(ui-router)的情况下也能很好地工作，但是当我试图将它放入具有多个状态的项目中时， map 不显示但是......它可以搜索一个地方并获得经度，纬度作为你可以在图片中看到

这是我的部分代码

服务: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);
    }

});

Controller :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: 会场.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

当包含 map 的 div，或者它的父级，或者它的父级的父级(任何 DOM 前身)具有 display:none 样式时(我假设当你改变声明:您隐藏了一些 View 并显示了其他 View ) map View 将无法正确初始化。当可见性发生变化时，您必须在 map 上触发 resize 事件。 (我认为这发生在你的情况下，从你提供的屏幕截图来看，API 加载成功，只有 View 没有正确初始化)只需将此代码添加到 Map 服务:

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

编辑

在您的代码中， map 位于 div id="addVenue" 内。因此，您需要在显示 div 后立即触发调整大小。为此，请将此函数添加到您的 VenueController:

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

当您要显示addVenue div 时，在venue.html View 中调用它。找到包含指向 href="#addVenue" 的链接的行并像这样更改它:

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

还有!!您的应用程序还有另一个问题。在 style.css 中删除这 3 行:

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

它们会导致谷歌地图无法正常运行。因为谷歌地图在内部使用图像，如果你添加这个约束，它们就会崩溃。