私は ngmap を使用して Google マップを描画します。画面を変更して戻るたびに、マップが部分的に描画されます。私はすでにこの解決策を試しています: How do I force redraw with 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>
関数 reRenderMaps() を呼び出す別の html のボタン:
<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>