2012-07-23 13 views
19

Pracuję nad migracją kodu mapy z wersji 2 do 3.Jak utworzyć krąg w mapie google v3 z tym samym promieniem na każdym poziomie powiększenia?

W wersji v2 utworzyłem koło za pomocą GProjection i Overlay i będzie ono wyglądać tak samo na wszystkich poziomach powiększenia.

W wersji 3 google podaje klasę koła, która utworzy okrąg na mapie, ale zmieni się w różnym poziomie powiększenia.

Chcę utworzyć krąg, który będzie mieć ten sam rozmiar we wszystkich poziomach powiększenia.

Chcę poznać w jakikolwiek inny sposób w google map v3, że mogę utworzyć kółko o tym samym rozmiarze dla wszystkich poziomów powiększenia.

Z góry dziękuję.

+0

Co robić masz na myśli ten sam rozmiar? który ma taki sam promień niezależnie od powiększenia mapy? – Jorge

+0

ten sam rozmiar: oznacza na poziomie powiększenia 6 z promieniem 10 rozmiaru koła jest inny, a na poziomie zoomu 7 promień 10 rozmiarów okręgu to inny okrąg rysowania na podstawie wartości rzutu, więc ten sam promień bez efektów różni się na każdym poziomie powiększenia. – Ashvin

+0

Czy masz na myśli krąg, który zmienia rozmiar w stosunku do podłoża, ale pozostaje taki sam rozmiar pod względem pikseli? – Marcelo

Odpowiedz

31

Aby utworzyć kręgi o takim samym rozmiarze piksela na ekranie (w stosunku do tego samego rozmiaru obszaru we współrzędnych geograficznych), tradycyjnie użyjesz znacznika z niestandardową ikoną w kształcie koła. Ale teraz możesz być bardziej elastyczny i używać względnie nowych symboli w wersji 3.

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(-122.5,47.5), 
    icon: { 
    path: google.maps.SymbolPath.CIRCLE, 
    fillOpacity: 0.5, 
    fillColor: '#ff0000', 
    strokeOpacity: 1.0, 
    strokeColor: '#fff000', 
    strokeWeight: 3.0, 
    scale: 20 //pixels 
    } 
}); 

bok: Można zrobić fajne animacje z tych symboli, a także: http://googlegeodevelopers.blogspot.com/2012/06/powerful-data-visualization-with.html

+0

Korzystanie z tej opcji ma pewne problemy z obsługą zdarzeń zIndex i zdarzeń myszy: http://stackoverflow.com/questions/11845916/google-maps-marker-zindex-doesnt-work-for-two-icon-types-symbol-and-string https://code.google.com/p/gmaps-api-issues/issues/detail?id=3611 – AlfaTeK

+0

Niestety, wygląda na to, że symbole nie są obecnie zgodne z wyświetlaczami Retina: http://stackoverflow.com/questions/17352770/making-google-maps-symbole-kompatybilne z wyświetlaczami o wysokiej rozdzielczości –

+0

Używanie skala nie działa dla mnie, musiałem użyć promienia, coś w tym stylu: 'promień: MAX_VALUE/Math.pow (2 , map.getZoom()) ' –

9

używam tego kodu do zarządzania zoom i kręgi skalowania na moim Google Map V3:

google.maps.event.addListener(iMap.map, 'zoom_changed', function() { 
    for (var i = 0; i < iMap.circle.length; i++) { 
     var p = Math.pow(2, (21 - iMap.map.getZoom())); 
     iMap.circle[i].setRadius(p * 1128.497220 * 0.0027); 
    } 

    menu.hide(); 
}); 
+6

Zastanawiam się, jak wymyśliłeś te dwie wartości: 1128.497220 i 0.0027? –

+0

1128.49 jest współczynnikiem skalowania dla Google Maps na poziomie powiększenia 20. Nie jestem pewien czy 0.0027. Domyślam się, że to ten rozmiar, do którego zmierza. – Rarw

Powiązane problemy