2012-07-23 8 views
19

Ich arbeite an der Migration von Kartencode von v2 nach v3.Wie erstellt man einen Kreis in Google Map v3 mit gleichem Radius in allen Zoomstufen?

In v2 habe ich Kreis mit Hilfe von GProjection und Overlay erstellen und es wird in allen Zoomstufe gleich groß aussehen.

In v3 gibt Google Circle-Klasse, die Kreis in der Karte erstellen wird, aber es wird in verschiedenen Zoom-Ebene ändern.

Ich möchte einen Kreis erstellen, der in allen Zoomstufen dieselbe Größe hat.

Ich möchte jede andere Weise in Google Map v3 wissen, dass ich Kreis mit gleicher Größe für alle Zoom-Ebene erstellen kann.

Vielen Dank im Voraus.

+0

Was tun Du meinst mit der gleichen Größe? Das hat den gleichen Radius, egal wie groß der Zoom in der Karte ist? – Jorge

+0

gleiche Größe: bedeutet in Zoom-Ebene 6 mit Radius 10 Kreisgröße ist anders und in Zoom-Ebene 7 Radius 10 Kreisgröße ist anders.Karte zeichnen Kreis basierend auf Projektionswert so gleichen Radius keine Effekte in jeder Zoomstufe unterschiedlich. – Ashvin

+0

Meinst du einen Kreis, der seine Größe in Bezug auf den Boden ändert, aber in Pixel die gleiche Größe behält? – Marcelo

Antwort

31

Um Kreise mit der gleichen Pixelgröße auf dem Bildschirm zu erstellen (im Gegensatz zu der gleichen Flächengröße in geografischen Koordinaten), würden Sie traditionell einen Marker mit einem benutzerdefinierten Symbol in Form eines Kreises verwenden. Aber jetzt kannst du flexibler sein und die relativ neuen Symbole in v3 verwenden.

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 
    } 
}); 

Abgesehen: Sie können auch aus diesen Symbolen coole Animationen machen: http://googlegeodevelopers.blogspot.com/2012/06/powerful-data-visualization-with.html

+0

Dies hat einige Probleme mit zIndex und Maus-Ereignisbehandlung: 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

Leider scheinen Symbole derzeit nicht mit Retina-Anzeigen kompatibel zu sein: http://stackoverflow.com/questions/17352770/make-google-maps-symbols-compatible-with-high-resolution-displays –

+0

using scale hat nicht funktioniert für mich, ich musste radius verwenden, etwa so: 'radius: MAX_VALUE/Math.pow (2 , map.getZoom()) ' –

9

ich diesen Code verwenden, Zoom und Skalierung Kreise auf meinem Google Map V3 zu verwalten:

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

Ich frage mich, wie bist du auf diese zwei Werte 1128.497220 und 0.0027 gekommen? –

+0

Die 1128.49 ist der Skalierungsfaktor für Google Maps in Zoomstufe 20. Nicht sicher aber die 0.0027. Meine Vermutung ist, dass das die Größe ist, die er anstrebt. – Rarw

Verwandte Themen