Question

我尝试将Google地图应用于我的AngularJS项目Link

并且在没有状态（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样式时（我认为当您更改状态时发生：隐藏一些视图并显示其他视图）地图视图无法正确初始化。当可见性发生变化时，您必须在地图上触发Map事件。（我认为这种情况会发生在您的情况下，从您提供的屏幕截图判断，API加载，只有视图未正确初始化）只需将此代码添加到this.resize = function() { if(this.map) google.maps.event.trigger(this.map, 'resize'); }服务：

div id="addVenue"

修改

在您的代码中，地图位于VenueController内。因此，您需要在显示div后立即触发调整大小。为此，请将此功能添加到$scope.mapresize = function(){ setTimeout(function(){ Map.resize(); }, 10); }：

venue.html

当您要显示addVenue div时，在href="#addVenue"视图中调用它。找到包含<div class="sm-st clearfix" href="#addVenue" ng-click="mapresize()" data-toggle="tab">链接的行，并将其更改为：

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

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

cap production rails:rake:db:reset

他们导致谷歌地图无法正常运作。因为谷歌地图在内部使用图像，如果添加此约束，它们将会中断。

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

1 个答案: