VS2015-Cordova-İyonik-Açısal-ngMap: harita yüksekliği varsayılan olarak 300px

Question

Açıkçası CSS hakkında öğreneceğimiz çok şey var!

Mobil uygulama geliştirmek için VS2015 ve Cordova kullanıyorum. Google haritaları sarmalamak için ngMap (http://ngmap.github.io/) kullanıyorum. Kütüphaneyi çok beğendim! Sorun şu ki, 300px boyutunu varsayılan ve CSS becerilerim bunu geçersiz kılmak için çok zayıf.

ngMap'in varsayılan değeri 300px olduğunu ve default-style="false"'u belirtebildiğini ve daha sonra position: absolute; height:100%; width:100%'u belirten CSS'de geçersiz kılma sağladığını biliyorum. Bu, haritanın sayfayı doldurmasını sağlamalıdır. Ben varsayılan davranışı kabul ettiğinizde

, ben bir çalışma harita var, ancak yalnızca 300px uzun boylu: Bunu yapmaya çalıştığınızda

, ben bu ile bitirmek İşte Plunker var

Bu basit, ancak karşılaştığım sorunu gösterir: http://plnkr.co/edit/8qfGaLBMgXFtluELZhCs?p=preview

CSS'nin önerilen geçersiz kılmalara sahip olduğunu unutmayın. Bunlar atlandığında, harita görünür - ancak sadece 300 piksel uzunluğunda. Bunun çok zor olmamasını ve diğerlerinin yukarıda listelenen talimatları uygulayarak başarılı olduğunu biliyorum. Sadece işe yaramayacağım.

Değeri için, Samsung S5 cihazına yerleştirdiğimde davranış aynıdır: Haritanın sol alt köşesini görüyorum. Herhangi bir yardım takdir!

Answer 1

bazı CSS ekleme ve size hedefe ulaşabilirsiniz olayı "yeniden boyutlandırmak" tetikleme:

CSS:

body, html { 
    height:100%; 
    width:100%; 
} 

.map { 
    position:absolute; 
    height:100%; 
    width:100%; 
} 

.scroll { 
    height: 100%; 
} 

JS:

NgMap.getMap({ id: "splashSearch" }).then(function (map) { 
    vm.map = map; 

    $timeout(function() { 
    google.maps.event.trigger(map,'resize'); 
    }, 200); 
}); 

Çatallaşmış sizin plunker: http://plnkr.co/edit/7dVCO8FpWxmLVVSMtqjH?p=preview