JavaScript – 如何在Google地图上覆盖SVG图?

我想在Google地图上添加叠加图片。该图像是我生成的SVG文件(Python与SVGFig)。

我使用以下代码:

if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(48.8, 2.4), 12);

    // ground overlay
    var boundaries = new GLatLngBounds(new GLatLng(48.283188032632829, 1.9675270369830129), new GLatLng(49.187215000000002, 2.7771877478303999));
    var oldmap = new GGroundOverlay("test.svg", boundaries);
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.addOverlay(oldmap);
}

令人惊讶的是,它适用于Safari 4,但它不适用于Firefox(使用Safari 3,背景不透明)。

有没有人有关于如何覆盖SVG的想法?

PS1:我读了一些像this或swa.ethz.ch/googlemaps的源代码,但是似乎他们必须使用JavaScript代码解析SVG并逐个添加所有的元素(但是我并不了解所有的元素来源…)。

PS2:SVG由不同的填充路径和圆形组成,具有透明度。
如果没有解决方案覆盖我的SVG,我可以使用2个替代解决方案:

>光栅化SVG
>转换GPolygons中的路径和圈子

但是我不喜欢第一个解决方案,因为位图的质量差,以及使用抗锯齿产生的时间。

而对于第二个解决方案,弧,椭圆和圆将必须分解成小折线。很多他们将是必要的一个很好的结果。但是我有大约3000个弧和圆圈来绘制,所以…

这里有一些消息(我希望把它们放在一个答案中,而不是编辑我的问题或创建一个新的问题,请随时移动,如果需要,或者告诉我,以便我可以纠正):

我的问题是:

var oldmap = new GGroundOverlay("test.svg", boundaries);
map.addOverlay(oldmap);

没有在Safari 3,Firefox和Opera(IE不能绘制SVG)上工作。

实际上,这个代码产生了以下元素的插入(在< div>)中

<img src="test.svg" style=".....">

而Safari 4可以绘制一个SVG文件作为一个图像,但这不是为其他浏览器做的方式。所以现在的想法是为SVG创建一个自定义叠加层,如here所述。

这就是为什么我要求this question(我很抱歉,但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);
} 

...

绘图功能尚未写入。

我仍然有一个问题(我慢慢地进步,感谢我读到/到处学到,还感谢回答我的问题的人)。

现在,问题如下:< object>标签,地图是不可拖动的。遍及< object>元素,鼠标指针不是“手图标”来拖动地图,而只是普通指针。

我没有找到如何纠正这个。我应该添加一个新的鼠标事件(我只是看到鼠标事件当点击或双击附加,但不是拖动地图…)?

还是有另一种方法来添加这个层,以保持拖拽能力?

谢谢你的意见和答案。

PS:我也尝试逐个添加SVG的元素,但实际上…我不知道如何将它们添加到DOM树中。在this example,SVG被读取并解析为GXml.parse(),所有具有给定标签名称的元素都被获取(xml.documentElement.getElementsByTagName),并被添加到SVG节点(svgNode.appendChild(node))。但是在我的情况下,我需要直接添加SVG / XML树(添加其所有元素),并且有不同的标签(< defs>< g>,< circle>,< path>等)。这可能会更简单,但我不知道该怎么做.. 🙁

http://stackoverflow.com/questions/1055367/how-can-i-overlay-svg-diagrams-on-google-maps

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:JavaScript – 如何在Google地图上覆盖SVG图?