Każdy, kto ma jakieś pomysły na to, co powoduje tę dziwną usterkę w komponentach interfejsu użytkownika map Google, będzie naprawdę wdzięczny za wiadomość od Ciebie!
mapa jest tworzona za pomocą:
var options = {
zoom: <?php echo $this->zoom ?>,
center: new google.maps.LatLng(<?php echo $this->centre_lat ?>, <?php echo $this->centre_lon ?>),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
a usterka jest taka sama, nawet bez znaczników.
google-maps
google-maps-api-3
Haroldo
źródło
źródło
Odpowiedzi:
Napotkaliśmy ten sam problem. Projektant CSS używał tego stylu:
style.css
Zamiast wyłączać sterowanie powiększeniem, naprawiliśmy problem, nadpisując styl img dla elementów map_canvas w następujący sposób:
style.css:
Element sterujący powiększeniem wyświetla się teraz poprawnie.
Ustawienie „img max-width: 100%” to technika stosowana przy projektowaniu responsywnych / płynnych witryn internetowych, dzięki czemu obrazy zmieniają rozmiar proporcjonalnie, gdy zmienia się rozmiar przeglądarki. Najwyraźniej niektóre systemy siatki css zaczęły domyślnie ustawiać ten styl. Więcej informacji na temat płynnych obrazów tutaj: http://www.alistapart.com/articles/fluid-images/ Nie wiem, dlaczego jest to sprzeczne z mapą Google ...
źródło
http://maps.gstatic.com/mapfiles/iw3.png
), który jest umieszczany w kontenerze nadrzędnym zoverflow: hidden
. Zatem ograniczenie szerokości obrazu powoduje jego kompresję.W najnowszej wersji interfejsu API map Google potrzebujesz tego:
źródło
Wygląda na problem z dźwignią zoomu. Spróbuj dodać
zoomControl:false
do swoich opcji.W rzeczywistości wydaje się, że normalny suwak powiększenia jest ustawiony na lewo od strony (użyj Firebug> Sprawdź element). Czy może to być konflikt CSS?
źródło
img {max-width: 100%; }
Cóż, mam na to poprawkę:
W swoim CSS dodałeś coś takiego:
staraj się nie robić tego globalnie i powinno cię to naprawić :)
źródło
To zadziałało dla mnie:
atrybut „! important” zapewnia, że nadpisuje każdy inny styl, #map to identyfikator przypisany podczas deklarowania nowego obiektu Gmaps:
źródło
Jeśli używasz funkcji elastycznej siatki programu Dreamweaver, domyślna konfiguracja powinna wyglądać następująco:
Spróbuj tego:
po prostu zamień kod tak, jak jest.
źródło
Bootstrap (od wersji 2.3.2) miesza z obrazami w taki sam sposób, jak w zaakceptowanej odpowiedzi.
Właściwie podejrzewam, że projekt użyty w serwisie Haroldo wykorzystuje Bootstrap.
Publikuję to, ponieważ nikt inny nie wspomniał o Bootstrap, a ktoś może szukać rozwiązania specyficznego dla Bootstrap.
źródło
Napotkałem ten problem na mojej witrynie Square Space. Nie miałem dostępu do arkusza stylów CSS. Ponieważ osadzasz dokument HTML, możesz po prostu użyć wbudowanego CSS, aby rozwiązać problem. Zmodyfikowałem styl kontenera zamiast dokonać zmiany w całej witrynie (czego nie mogłem zrobić). Oto co zrobiłem:
źródło