2

我使用 ngmap 来绘制谷歌地图，每次我改变屏幕并返回时，地图都是部分绘制的。我已经尝试过这个解决方案：如何使用 Google Maps API v3.0 强制重绘？. 这是我的代码：控制器：

    (function() {
    'use strict';

     angular
    .module('jhipsterApp')
    .controller('UbicacionDialogController', UbicacionDialogController);

UbicacionDialogController.$inject = ['$scope', '$stateParams', '$uibModalInstance', 'entity', 'Ubicacion', 'Precio', 'Cervesa','NgMap'];

function UbicacionDialogController ($scope, $stateParams, $uibModalInstance, entity, Ubicacion, Precio, Cervesa, NgMap) {
    var vm = this;
    vm.ubicacion = entity;
    vm.precios = Precio.query();
    vm.cervesas = Cervesa.query();
    vm.load = function(id) {
        Ubicacion.get({id : id}, function(result) {
            vm.ubicacion = result;
        });
    };
    vm.types = "['establishment']";
    vm.placeChanged = function() {
        vm.place = this.getPlace();
        console.log('location', vm.place.geometry.location);
        vm.map.setCenter(vm.place.geometry.location);
        vm.ubicacion.latitud = vm.place.geometry.location.lat()
        vm.ubicacion.longitud = vm.place.geometry.location.lng()
    }
    NgMap.getMap().then(function(map) {
        vm.map = map;

    });

    vm.reRenderMap = function() {
        $timeout(function(){
            angular.forEach(vm.map, function(index) {
                google.map.event.trigger(index, 'resize');
            });
        }, 200);
    }

HTML：

       Auto Complete Type:
      <select ng-model="vm.types">
        <option value="['geocode']">Geodode</option>
        <option value="['establishment']">Establishment</option>
        <option value="['address']">Address</option>
    </select><br/>
    Enter an address: <br/>
    <input places-auto-complete size=80
           ng-model="vm.ubicacion.direccion"
           types="{{types}}"

           class="form-control" name="direccion"

           on-place-changed="vm.placeChanged()" /> <br/>
    <div ng-show="vm.place" class="allMapa">
        Address = {{vm.place.formatted_address}} <br/>
        Location: {{vm.place.geometry.location}}<br/>
        <!--1: {{vm.ubicacion.latitud}}<br/>
        2: {{vm.ubicacion.longitud}}<br/>-->
    </div>
    address : {{vm.ubicacion.direccion}}
    <div >
    <ng-map center="[40.74, -74.18]"  >
        <marker position="{{vm.ubicacion.direccion}}"></marker>
    </ng-map>
    </div>

html中的按钮调用函数reRenderMaps()：

 <div class="col-xs-4 no-padding-left">
            <button class="btn btn-primary" ui-sref="ubicacion.new"       onclick="vm.reRenderMap()" ><!-- ubicacion.new -->
                <span class="glyphicon glyphicon-plus"></span>
4

0 回答 0