如何在Google地图上叠加SVG图表？ [英] How can I overlay SVG diagrams on Google Maps?

问题描述

我想在Google地图上添加叠加图片。这个图像是我生成的一个SVG文件（Python with SVGFig）。

我使用下面的代码：

  if（GBrowserIsCompatible（））{
 var map = new GMap2（document.getElementById（map_canvas））; 
 map.setCenter（新GLatLng（48.8,2.4），12）; 
 
 //地面覆盖图
 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（新的GSmallMapControl（））; 
 map.addControl（new GMapTypeControl（））; 
 map.addOverlay（oldmap）; 
 
 $ / code> 

令人惊讶的是，它适用于Safari 4，但它不适用于Firefox （使用Safari 3，背景不透明）。

有人有关于如何覆盖SVG的想法吗？

PS1：我阅读了一些作品，如此或源代码swa.ethz.ch/googlemaps，但似乎他们必须使用JavaScript代码来解析SVG并逐个添加所有元素（但我不明白所有源代码...）。 b
$ b

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.svgstyle =.....> 
  

Safari 4能够将SVG文件绘制为图像，但这不是为其他浏览器做。所以现在这个想法是为SVG创建一个自定义覆盖，正如这里。

这就是为什么我要求

由于使用Webkit为使用< object> 元素呈现透明背景的SVG存在一个小错误，我需要使用< object> 或< img> >相应的浏览器（我不喜欢这样，但是......暂时，它仍然是快速和肮脏的实验）

所以我开始使用此代码（仍在进行中）：

  //创建对象
函数myOverlay（SVGurl，bounds）
 {
 this.url_ = SVGurl; 
 this.bounds_ = bounds; 
} 
 
 // prototype 
 myOverlay.prototype = new GOverlay（）; 
 
 //初始化
 myOverlay.prototype.initialize =函数（map）
 {
 //创建div 
 var div = document.createElement（ DIV）; 
 div.style.position =绝对; 
 div.setAttribute（'id'，SVGdiv）; 
 div.setAttribute（'width'，900px）; 
 div.setAttribute（'height'，900px）; 
 
 //使用与地图相同的z-index添加它
 this.map_ = map; 
 this.div_ = div; 
 
 //创建新的svg根元素并设置属性
 var svgRoot; 
 if（BrowserDetect.browser =='Safari'）
 {
 // webkit中的错误：with< objec>元素，Safari放置白色背景...... :-( 
 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）; 
} 
 
 ... 
  

绘制函数还没有写出来。

我stil我有一个问题（我进步缓慢，这要归功于我读书/到处学习，还要感谢回答我的问题的人）。

现在，问题是以下内容：使用< object> 标记时，地图不可拖动。遍及< object> 元素，鼠标指针不是用于拖动地图的手形图标，而是普通指针。

我没有找到如何解决这个问题。我应该添加一个新的鼠标事件（我只是看到鼠标事件，当点击或双击附加，但不是拖动地图...）？

或者是否有另一种方法来添加此图层以保持拖拽能力？

感谢您的意见和答复。

PS：我也尝试逐个添加SVG的元素，但是......其实......我不知道如何将它们添加到DOM树中。在这个例子中，读取SVG并使用 GXml.parse解析（ ），并获得所有具有给定标签名称的元素（ xml.documentElement.getElementsByTagName ）并添加到SVG节点（ svgNode.appendChild（节点））。但在我的情况下，我需要直接添加SVG / XML树（添加所有元素），并且有不同的标签（< defs> ，< g> ，< circle> ，<路径> ，等等。）。这可能会更简单，但我不知道该怎么做..：（

I would like to add an overlay image on a Google Map. The image is a SVG file I have generated (Python with SVGFig).

I am using the following code:

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

Surprisingly, it works with Safari 4, but it doesn't work with Firefox (with Safari 3, the background is not transparent).

Does anyone have an idea on how I could overlay an SVG?

PS1: I read some works like this or the source code of swa.ethz.ch/googlemaps, but it seems that they have to use JavaScript code to parse the SVG and add one by one all the elements (but I did not understand all the source...).

PS2: The SVG is composed of different filled paths and circles, with transparency. If there is no solution to overlay my SVG, I can use 2 alternative solutions:

• rasterize the SVG
• convert the paths and circles in GPolygons

But I do not really like the 1st solution because of the poor quality of the bitmap and the time to generate it with antialiasing.

And for the 2nd solution, the arcs, ellipses and circles will have to be decomposed into small polylines. A lot of them will be necessary for a good result. But I have around 3000 arcs and circles to draw, so...

解决方案

Here are some news (I hope it's better to put them here in an answer, instead of editing my questions or to create a new question. Please feel free to move it if needed, or to tell me, so as I can rectify):

My problem was the following:

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

did not work on Safari 3, Firefox and Opera (IE is not enable to draw SVG).

In fact, this code produce the insertion (in a <div>) of the following element

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

And Safari 4 is able to draw a SVG file as an image, but this is not the way to do for the other browser. So the idea is now to create a custom overlay for the SVG, as explained here.

That's the reason why I asked for this question (I am sorry, but HTML/javascript are not my strongest points).

And since there is a small bug with Webkit for rendering a SVG with transparent background with <object>element, I need to use <object> or <img> accordingly to the browser (I don't like this, but... for the moment, it's still the quick-and-dirty experiments)

So I started with this code (still work in progress):

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

...

The draw function is not yet written.

I still have a problem (I progress slowly, thanks to what I read/learn everywhere, and also thanks to people who answer my questions).

Now, the problem is the following : with the <object> tag, the map is not draggable. All over the <object> element, the mouse pointer is not "the hand icon" to drag the map, but just the normal pointer.

And I did not find how to correct this. Should I add a new mouse event (I just saw mouse event when a click or a double-click append, but not for dragging the map...) ?

Or is there another way to add this layer so as to preserve the drag-ability ?

Thank you for your comments and answers.

PS: I also try to add one by one the elements of my SVG, but... in fact... I don't know how to add them in the DOM tree. In this example, the SVG is read and parsed with GXml.parse(), and all the elements with a given tag name are obtained (xml.documentElement.getElementsByTagName) and added to the SVG node (svgNode.appendChild(node)). But in my case, I need to add directly the SVG/XML tree (add all its elements), and there are different tags (<defs>, <g>, <circle>, <path>, etc.). It is may be simpler, but I don't know how to do.. :(

这篇关于如何在Google地图上叠加SVG图表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！