2012-07-23 39 views
19

Estoy trabajando en la migración de código de mapa de v2 a v3.Cómo crear un círculo en google map v3 con el mismo radio en todos los niveles de zoom?

En v2 tengo crear círculo con la ayuda de GProjection y Overlay y se verá del mismo tamaño en todos los niveles de zoom.

En v3 google da una clase Circle que creará un círculo en el mapa, pero cambiará en un nivel de zoom diferente.

Quiero crear un círculo que tendrá el mismo tamaño en todos los niveles de zoom.

Quiero saber de otra manera en google map v3 por eso puedo crear un círculo del mismo tamaño para todos los niveles de zoom.

Gracias de antemano.

+0

Qué hacer quieres decir con el mismo tamaño? que tiene el mismo radio sin importar el zoom en el mapa? – Jorge

+0

mismo tamaño: significa en el nivel de zoom 6 con radio 10 el tamaño del círculo es diferente y en el nivel de zoom 7 el tamaño del círculo 10 es diferente. Dibuja un círculo basado en el valor de proyección para que el mismo radio no tenga efectos diferentes en cada nivel de zoom. – Ashvin

+0

¿Te refieres a un círculo que cambia de tamaño con respecto al suelo pero mantiene el mismo tamaño en términos de píxeles? – Marcelo

Respuesta

31

Para crear círculos que tengan el mismo tamaño de píxel en la pantalla (frente al mismo tamaño de área en coordenadas geográficas), tradicionalmente se usaría un Marcador con un icono personalizado con forma de círculo. Pero ahora puede ser más flexible y usar los Símbolos relativamente nuevos en v3.

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

Aparte: Puede hacer animaciones fresco de estos símbolos, así: http://googlegeodevelopers.blogspot.com/2012/06/powerful-data-visualization-with.html

+0

Usar esto tiene algunos problemas con el manejo de eventos de zIndex y mouse: 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

Desafortunadamente, parece que los símbolos no son actualmente compatibles con las pantallas Retina: http://stackoverflow.com/questions/17352770/making-google-maps-symbols-compatible-with-high-resolution-displays –

+0

Usar la báscula no me funcionaba, tuve que usar el radio, algo como esto: 'radius: MAX_VALUE/Math.pow (2 , map.getZoom()) ' –

9

utilizo este código para manejar el zoom y los círculos de escala en mi 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

Me pregunto cómo surgieron estos dos valores 1128.497220 y 0.0027? –

+0

El 1128.49 es el factor de escala para Google Maps a nivel de zoom 20. No estoy seguro de que el 0.0027 sin embargo. Supongo que ese es el tamaño que busca. – Rarw

Cuestiones relacionadas