2011-08-19 14 views
6

To naprawdę mnie nęka - dużo.dlaczego Google InfoWindow CSS nie jest ujawniony? Dostosowanie jest zbyt trudne.

Po brodząc Google Maps v3 wygenerowany kod po stronie klienta w Firebug, jestem o gotowy do jazdy w dół ulicy i dać niektóre z tych inżynierów kawałek mojego umysłu ... arrrgh: P

infowWindow klasa produkuje HTML, który osobiście uważam za prosty. może ktoś pomoże mi to zrozumieć.

Struktura infowWindow HTML jest tak:

#map_canvas > div > div > div > div > div // 5 levels of elements, 
no big deal here, ok... 
> div // top left corner 
div // top right corner 
div // bottom left corner 
div // bottom right corner 

// now comes fun stuff for the speech bubble arrow: 

div 
div 
div 
div 
div 
div 
div 
div 
div 
div 

// the 10 divs above are stacked diagonally with odd sizes to make this arrow. 
i'm sorry but WHY?!? is it done like that? I suppose they wanted the user to be 
able to grab the map even right next to the arrow. Think about this: do users 
really need to be able to not grab the arrow? if grabbing the arrow causes map pan, 
as is the case for the shadow images, would that really be a problem? 

div // bottom middle for image background border or something 
div // top middle 
div // middle 
div // bottom middle, again 
div // entire block of the infoWindow, probably the container 
> img // close box 
div // center block with the contents of the infoWindow 
div // text content container 

WOW - Ów orzechy!

Zauważ, że nie ma prawdziwej struktury semantycznej, i - Boże, odważę się mieć takie założenie - żadnych nazw klas w dowolnym miejscu, nic. Pomyślałem, że może mają jakiś rodzaj 9-krotnego pudełka, a następnie produkują strzałkę oddzielnie; Mam na myśli, sprite obrazu w iw3.png na pewno nie będzie problemu tutaj.

I drogo nadzieję, że ktoś, kto ma wpływ na to api spotyka to i nadzieją Google będzie w końcu znaleźć sposób na rozwiązanie tego taki, że niestandardowe infoWindow wizualne są tak proste, jak markery.

Dzięki za tuning! radosne komentowanie.

tymczasem będę używać hack, aby dostać się do tych szalonych div i sprawić, że będą wypełniać moją ofertę.


wcześniej ja skomentował innego wątku i myślę, że nie powinno być zbyt dużo, aby poprosić o metody w API, które pozwala używać niestandardowych UI bez uciekania się do najbliższej-duplikacji całego obiektu window tak jak jest to obecnie konieczne (zobacz klasy rozszerzeń google v3).

google.maps.infoWindow.setStyle({ 
    'topleft' : { 
    'background' : 'url(images/windowsprite.png) 0 0 no-repeat', 
    'width' : '10px', 
    'height' : '10px' 
    }, 
    'topRight' : { 
    ...etc... 
    } 
    ...etc... 
}) 

Odpowiedz

1

Czy próbowałeś Infobox?

http://googlegeodevelopers.blogspot.com/2010/04/infobox-10-highly-customizable.html

lub InfoBubble?

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/

Obaj daje nieco większą kontrolę nad wyglądem infowindows, wciąż abstrahując niektórych skomplikowanych części.

Brak klas elementów to (dobra) decyzja projektowa dotycząca interfejsu API. Eliminuje możliwość wystąpienia konfliktów z klasami zdefiniowanymi przez użytkownika.

+1

Tak, próbowałem obu, ale jestem zmęczony, ponieważ jest to wiele powtarzających się funkcji w ogromnej bibliotece, więc mogę zrobić kilka prostych adnotacji CSS. Właśnie oczekiwałem interfejsu API google, który eksponuje pole CSS jako właściwość ustawialną. Jeśli chodzi o zajęcia, nie sądzę, że byłby to problem z prostym prefiksem. – tim

1

Po wielu próbach i eror zdecydowałem, najlepszym sposobem rozwiązania tego problemu jest użycie klasy OverlayView i po prostu niestandardowe zbudowanie kontenera. Cóż, "po prostu" jest niedopowiedzeniem, ale działa. Teraz mam pełną kontrolę nad układem i funkcjonalnością.