javascript - icon - marcar puntos en google maps api

Optimización de marcadores SVG en Google Maps

Question

¿Hay buenas maneras de optimizar la forma en que Google Maps API v3 dibuja marcadores en el documento HTML cuando se utilizan símbolos SVG para los iconos? Aquí hay un ejemplo de un marcador que usa símbolos SVG:

 var star = {
path: ''M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z'',
fillColor: ''yellow''
};
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: star,
map: map,
optimized: true //Does not seem to do anything..
});

Google tiene esta propiedad llamada "optimizada" que puede establecerse en marcadores, y cuando se utilizan iconos PNG en lugar de dibujos SVG, esto funciona bien: Google crea un único lienzo por baldosa en lugar de un img por icono, lo que obviamente se escala mucho mejor .

Sin embargo, la propiedad "optimizada" no parece hacer nada cuando se utilizan marcadores SVG: siempre parecen estar dibujados en un único lienzo por marcador. Cuando tengo muchos marcadores, ciertos navegadores comienzan a tener problemas de rendimiento. Chrome generalmente lo maneja bien, pero IE9, por ejemplo, no maneja muchos marcadores antes de mostrar problemas de rendimiento significativos. La agrupación no es una opción en este caso.

¿Alguien sabe alguna buena forma de optimizar esto, para que los navegadores puedan manejar más marcadores SVG al mismo tiempo?

Answer 1

¿Qué tan complicados son los iconos SVG que estás generando? Porque también podría dibujar el ícono en un objeto canvas y usar el método toDataURL para generar un uri de datos para usar en Google Maps. Esto generaría una imagen de mapa de bits para que funcione en IE9 (al menos el método es compatible).

También puede dibujar un SVG en un lienzo, pero hay algunas advertencias si desea modificarlas programáticamente. Y IE9 probablemente no cooperará, así que no estoy seguro de si ese es el camino a seguir.

Answer 2

Según mi experiencia, puedes utilizar este script y funciona perfectamente:

var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
draggable: true,
map: map
});

Además, si desea usar el archivo SVG de css. se puede usar de la siguiente manera:

var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: ''M22-48h-44v43h16l6 5 6-5h16z'',
fillColor: ''#6331AE'',
fillOpacity: 1,
strokeColor: '''',
strokeWeight: 0
},
map_icon_label: ''<span class="class_name1 class_name2"></span>'',
draggable: true,
map: map
});

Luego puede agregar los valores CSS en class_name1 y class_name2 para llevar la imagen svg al costado del cuadrado. Si desea cambiar el fondo del marcador en algunas formas comunes, he compartido debajo algunas rutas de marcador comunes:

 MAP PIN = ''M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z'';
SQUARE PIN = ''M22-48h-44v43h16l6 5 6-5h16z'';
SHIELD = ''M18.8-31.8c.3-3.4 1.3-6.6 3.2-9.5l-7-6.7c-2.2 1.8-4.8 2.8-7.6 3-2.6.2-5.1-.2-7.5-1.4-2.4 1.1-4.9 1.6-7.5 1.4-2.7-.2-5.1-1.1-7.3-2.7l-7.1 6.7c1.7 2.9 2.7 6 2.9 9.2.1 1.5-.3 3.5-1.3 6.1-.5 1.5-.9 2.7-1.2 3.8-.2 1-.4 1.9-.5 2.5 0 2.8.8 5.3 2.5 7.5 1.3 1.6 3.5 3.4 6.5 5.4 3.3 1.6 5.8 2.6 7.6 3.1.5.2 1 .4 1.5.7l1.5.6c1.2.7 2 1.4 2.4 2.1.5-.8 1.3-1.5 2.4-2.1.7-.3 1.3-.5 1.9-.8.5-.2.9-.4 1.1-.5.4-.1.9-.3 1.5-.6.6-.2 1.3-.5 2.2-.8 1.7-.6 3-1.1 3.8-1.6 2.9-2 5.1-3.8 6.4-5.3 1.7-2.2 2.6-4.8 2.5-7.6-.1-1.3-.7-3.3-1.7-6.1-.9-2.8-1.3-4.9-1.2-6.4z'';
ROUTE = ''M24-28.3c-.2-13.3-7.9-18.5-8.3-18.7l-1.2-.8-1.2.8c-2 1.4-4.1 2-6.1 2-3.4 0-5.8-1.9-5.9-1.9l-1.3-1.1-1.3 1.1c-.1.1-2.5 1.9-5.9 1.9-2.1 0-4.1-.7-6.1-2l-1.2-.8-1.2.8c-.8.6-8 5.9-8.2 18.7-.2 1.1 2.9 22.2 23.9 28.3 22.9-6.7 24.1-26.9 24-28.3z'';
SQUARE = ''M-24-48h48v48h-48z'';
SQUARE_ROUNDED = ''M24-8c0 4.4-3.6 8-8 8h-32c-4.4 0-8-3.6-8-8v-32c0-4.4 3.6-8 8-8h32c4.4 0 8 3.6 8 8v32z'';

Espero que te ayude

Answer 3

aquí hay un parche svg para ie , y deberás usar como

<!--[if IE 9]>
<script src="svg.js"></script>
<![endif]-->