Aquí hay algunas noticias (espero que sea mejor ponerlas aquí en una respuesta, en lugar de editar mis preguntas o crear una nueva pregunta. Siéntase libre de moverla si es necesario, o de decirme, para que yo puede rectificar):
Mi problema era el siguiente:
var oldmap = new GGroundOverlay("test.svg", boundaries);
map.addOverlay(oldmap);
no trabajar en Safari 3, Firefox y Opera (IE no se permiten dibujar SVG).
De hecho, este código generar la inserción (en un <div>
) del elemento siguiente
<img src="test.svg" style=".....">
y Safari 4 es capaz de arrastrar un archivo SVG como una imagen, pero esta no es la manera de hacerlo para el otro navegador. Entonces la idea ahora es crear una superposición personalizada para SVG, como se explica en here.
Esa es la razón por la que solicité this question (Lo siento, pero HTML/javascript no son mis puntos más fuertes).
Y puesto que hay un pequeño error con Webkit para la prestación de un SVG con el fondo transparente con <object>
elemento, necesito utilizar <object>
o <img>
en consecuencia para el navegador (no me gusta esto, pero ... por el momento , sigue siendo los experimentos rápida y sucia-)
así que empecé con este código (todavía trabajo en curso):
// create the object
function myOverlay(SVGurl, bounds)
{
this.url_ = SVGurl;
this.bounds_ = bounds;
}
// prototype
myOverlay.prototype = new GOverlay();
// initialize
myOverlay.prototype.initialize = function(map)
{
// create the div
var div = document.createElement("div");
div.style.position = "absolute";
div.setAttribute('id',"SVGdiv");
div.setAttribute('width',"900px");
div.setAttribute('height',"900px");
// add it with the same z-index as the map
this.map_ = map;
this.div_ = div;
//create new svg root element and set attributes
var svgRoot;
if (BrowserDetect.browser=='Safari')
{
// Bug in webkit: with <objec> element, Safari put a white background... :-(
svgRoot = document.createElement("img");
svgRoot.setAttribute("id", "SVGelement");
svgRoot.setAttribute("type", "image/svg+xml");
svgRoot.setAttribute("style","width:900px;height:900px");
svgRoot.setAttribute("src", "test.svg");
}
else //if (BrowserDetect.browser=='Firefox')
{
svgRoot = document.createElement("object");
svgRoot.setAttribute("id", "SVGelement");
svgRoot.setAttribute("type", "image/svg+xml");
svgRoot.setAttribute("style","width:900px;height:900px;");
svgRoot.setAttribute("data", "test.svg");
}
div.appendChild(svgRoot);
map.getPane(G_MAP_MAP_PANE).appendChild(div);
//this.redraw(true);
}
...
La función draw
aún no está escrito.
Todavía tengo un problema (progreso lentamente, gracias a lo que leo/aprendo en todas partes, y también gracias a las personas que responden mis preguntas).
Ahora, el problema es el siguiente: con la etiqueta <object>
, el mapa no se puede arrastrar. En todo el elemento <object>
, el puntero del mouse no es "el icono de la mano" para arrastrar el mapa, sino solo el puntero normal.
Y no he encontrado cómo corregir esto. ¿Debo agregar un nuevo evento de mouse (acabo de ver el evento del mouse cuando se hace clic en un clic o en un doble clic, pero no para arrastrar el mapa ...)?
O hay otra forma de agregar esta capa con el fin de preservar la capacidad de arrastrar?
Gracias por sus comentarios y respuestas.
PD: También trato de agregar uno por uno los elementos de mi SVG, pero ... de hecho ... no sé cómo agregarlos al árbol DOM. En this example, el SVG se lee y se analiza con GXml.parse()
, y todos los elementos con un nombre de etiqueta dado se obtienen (xml.documentElement.getElementsByTagName
) y se agregan al nodo SVG (svgNode.appendChild(node)
). Pero en mi caso, necesito agregar directamente el árbol SVG/XML (agregar todos sus elementos), y hay diferentes etiquetas (<defs>
, <g>
, <circle>
, <path>
, etc.). Es puede ser más simple, pero no sé cómo hacerlo .. :(
¡Qué gran pregunta. Mi intuición es que su segundo enfoque no funcionará, pero dudan en responder sin confirmar cómo funciona gmaps con ese volumen de polilíneas. Espero ver cómo va esto. – RedBlueThing
¿Podría ser que GGroundOverly haga uso de imágenes de fondo CSS? FF no maneja (sin embargo, 3.5 lo hará) SVG como fondos. – Boldewyn
Acabo de probar con FF 3.5, pero tampoco funciona. De hecho, cuando busco en los medios descargados (Herramientas/Información de página/Medios), mi SVG no se carga en absoluto ... – ThibThib