Google Maps api v3 tools: zniekształcenia wizualne?

Właśnie zauważyłem, że narzędzia widoku gMap wyświetlają ... raczej niezwykle. Ich regiony wciąż wydają się być właściwie zdefiniowane - mogę z nimi współdziałać, tylko ich wygląd wygląda na pomieszany.Google Maps api v3 tools: zniekształcenia wizualne?

Nie zastosowałem żadnego CSS do żadnego z fragmentów mapy, a jedynym css, który zastosowałem do kontenera mapy jest width:100%; height:100%; z-index:0; (co normalnie robię).

mam inne elementy na stronie, które mają position:absolute; i position:fixed; i kilka wysokich z-index s (500 & 1000). Czy to możliwe, że powodują wizualne zniekształcenie narzędzi mapy?

Widzę te same dziwne zniekształcenia wizualne w najnowszych wersjach Chrome, Chrome Canary, Ffx, Safari i Opera (na Mac OSX).

Sprawdziłem narzędzia dev/firebug i nie ma niespodziewanego CSS, który jest stosowany do kontenera mapy lub bezpośrednio do jego narzędzi.

Google Maps Api v3: Map interface tools

Oto dokładny HTML (rozebrałem się inne elementy i CSS i tym niesamowitość wciąż zdarza):

<html style="width:100%;height:100%;"> 
    <head> 
     <link rel="stylesheet" href="shared/bootstrap/css/foundation.min.css"> 
     <link rel="stylesheet" href="shared/bootstrap/css/v2.2.2.min.css"> 
     <script 
      type="text/javascript" 
      src="http://maps.googleapis.com/maps/api/js?key=..."> 
     </script> 
     <script type="text/javascript"> 
      function ginit() { 
       var vancouver = new google.maps.LatLng(49.285415,-123.114982); 
       var mapOptions = { 
        center: vancouver, 
        zoom: 15, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(
        document.getElementById("map"), 
        mapOptions 
       ); 
       var infowindow = new google.maps.InfoWindow(), 
        marker; 
      }//ginit() 
     </script> 
    </head> 
    <body onload="ginit();" style="width:100%;height:100%;"> 
     <div id="map" style="width:100%;height:100%;"></div> 
    </body> 
</html>

EDIT: Wydaje się, że problem jest pochodzących z połączenie Foundation i Bootstrap: usunięcie jednego z nich rozwiązuje problem. Również nie ma znaczenia, że nie ma elementów na klasach odwołań do stron z bibliotek, powoduje to jednakowe zniekształcenie.

Próbowałem umieścić to w skrzypcach, ale nie mogłem załadować jsfiddle.net.

Źródło

2012-12-19 jacob

Tylko ten nowy projekt? Wszystkie projekty? Na jednym komputerze? Wszystkie komputery? Czy widzimy demo? Nie ma tu zbyt wiele do zrobienia. – Sparky

Pracuję tylko nad jednym projektem w tej chwili. Testowałem go na 2 komputerach: OSX 10.6 i 10.8. Pracuję nad skrzypcami (jest wiele rzeczy, które muszę usunąć), ale mam problemy z dostępem do jsfiddle.net. – jacob

Tak, z jakiegoś powodu jsFiddle jest teraz bardzo wolny. Robisz to, co trzeba, tworząc demo, ale właśnie dlatego pytania nie powinny polegać na jsFiddle, aby pokazać swój kod. – Sparky

Dla przyszłych użytkowników, u których występuje ten sam problem, oto poprawka.

#map img{max-width: inherit;}

Podobnie jak inne odpowiedzi, jest to problem z maksymalną szerokością.

Źródło

2013-01-13 18:50:03

'#map img {max-width: inherit! Important; max-height: dziedziczenie! important} ' –

Zestaw bootstrap i podkład { img max-width:100% } do płótna Map Google. Powoduje to, że elementy sterujące mapy są wyświetlane w postaci distored. Zmień wartość css na max-width:none;. [source]

Zastrzeżenie: Widocznie img { max-width: 100% … } jest integralną dla obrazów automatycznie zmienia rozmiar dla wrażliwych układów, więc należy używać z rozwagą. [source]

Źródło

2012-12-20 00:48:35 jacob

Tak, # map-płótno img { max-width :Żaden; } Naprawiono to dla mnie. –

Fundacja 5 nie tylko załamuje się, ale również łamie MapQuest. Na szczęście zarówno Goomap & Quest ma klasę, która pozwala nam przeciążać F5 behavious tylko do wyświetlania map.

.google-map { 
    height: 400px; // no default height 
    color: #191970; // default color for both text and background is white !!! 
} 

.quest-map { 
    height:400px; 
    color: #191970; 
} 

// Fix Foundation bug with MapQuest 
.mqa-display { 
    img {max-width: none;} 
    label { width: auto; display: inline; } 
} 

// Fix Foundation bug with GoogleMap 
.gm-style { 
    img { max-width: none; } 
    label { width: auto; display: inline; } 
}

Źródło

2015-02-18 14:36:44 Fulup

Google Maps api v3 tools: zniekształcenia wizualne?

Odpowiedz

Powiązane problemy