这里有一些新闻(我希望最好将它们放在答案中,而不是编辑我的问题或创建一个新问题。如果需要,请随时移动它,或者告诉我,以便我更正):
我的问题如下:
var oldmap = new GGroundOverlay("test.svg", boundaries);
map.addOverlay(oldmap);
不适用于 Safari 3、Firefox 和 Opera(IE 无法绘制 SVG)。
事实上,这段代码产生了<div>
以下元素的插入(在 a 中)
<img src="test.svg" style=".....">
Safari 4 能够将 SVG 文件绘制为图像,但这不是其他浏览器的方式。所以现在的想法是为 SVG 创建一个自定义叠加层,如此处所述。
这就是我问这个问题的原因(很抱歉,HTML/javascript 不是我的强项)。
而且由于Webkit存在一个小错误,<object>
用于渲染具有透明背景的 SVG -肮脏的实验)<object>
<img>
所以我从这段代码开始(仍在进行中):
// 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);
}
...
该draw
函数尚未编写。
我仍然有一个问题(我进步缓慢,这要感谢我到处阅读/学习的内容,也感谢回答我问题的人)。
现在,问题如下:使用<object>
标签,地图不可拖动。在整个<object>
元素上,鼠标指针不是“手形图标”来拖动地图,而只是普通的指针。
我没有找到如何纠正这个问题。我应该添加一个新的鼠标事件(我只是在单击或双击追加时看到鼠标事件,而不是用于拖动地图......)?
或者有没有另一种方法来添加这个层以保持拖动能力?
感谢您的评论和回答。
PS:我也尝试将我的SVG的元素一个一个添加,但是……其实……我不知道如何在DOM树中添加它们。在这个例子中,使用 读取和解析 SVG GXml.parse()
,获取所有具有给定标签名称的元素 ( xml.documentElement.getElementsByTagName
) 并添加到 SVG 节点 ( svgNode.appendChild(node)
)。但就我而言,我需要直接添加 SVG/XML 树(添加其所有元素),并且有不同的标签(<defs>
、<g>
、<circle>
、<path>
等)。它可能更简单,但我不知道该怎么做.. :(