4

我正在尝试对使用 google geochart API 生成的地图实现某种缩放/平移功能。网上有一些脚本可以缩放/平移 svg 图像，但我没有成功地将它们实现到 geochart api 生成的 SVG。

我正在尝试 SVGPan 库http://code.google.com/p/svgpan/

我用来将脚本附加到 SVG 的代码是：

google.visualization.events.addListener(chart, 'ready', function () {

var script = document.createElementNS('http://www.w3.org/2000/svg', 'script');     
script.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://www.cyberz.org/projects/SVGPan/SVGPan.js');        
var svg = document.getElementsByTagName('svg')[0];
svg.appendChild(script);
});

这是jsfiddle：

http://jsfiddle.net/cmoreira/CetaA/

使用 Firebug，我可以看到脚本正在 svg 上放置，但没有任何反应，它没有按预期实现 svg 中的功能。

我不确定这条线是否正确，因为我没有在网上找到任何示例：

 var script = document.createElementNS('http://www.w3.org/2000/svg', 'script');

我做错了什么，或者我想做的事情是不可能的？

谢谢你的帮助！干杯卡洛斯

4

2 回答 2

3

经过一些实验，我找到了一个简单的解决方案，由于到目前为止还没有任何有价值的答案，所以我决定分享我目前所拥有的。

我决定用 CSS 来做，在放大/缩小时用不同的值重新绘制地图，并用 CSS 隐藏溢出。

这是一个工作示例：

http://jsfiddle.net/cmoreira/CCUpf/

CSS

#canvas {
    width:400px;
    height:300px;
    overflow:hidden;
}

#visualization {
top:0px;
left:0px;
}

缩放/平移 Javascript

function zoomin() {
    mw = mw+50;
    mh = mh+50;
    x = x-25;
    y = y-25;
    document.getElementById('visualization').style.top = y +'px';
    document.getElementById('visualization').style.left = x +'px';
    drawVisualization(mw,mh);
 }

  function zoomout() {
    if(mw > 600) {
    mw = mw-50;
    mh = mh-50;
    x = x+25;
    y = y+25;
    document.getElementById('visualization').style.top = y +'px';
    document.getElementById('visualization').style.left = x +'px';
    drawVisualization(mw,mh);
    }
 }

 function left() {
     x = x-50;
     document.getElementById('visualization').style.left = x +'px';
 }
 function right() {
     x = x+50;
     document.getElementById('visualization').style.left = x +'px';
 }
  function up() {
     y = y-50;
     document.getElementById('visualization').style.top = y +'px';
 }
   function down() {
     y = y+50;
     document.getElementById('visualization').style.top = y +'px';
 }

我知道这对于 google geochart API 来说是一个非常糟糕的缩放/平移功能，但它确实是，对吧？

欢迎对这种简单方法进行任何改进。谢谢！

于 2012-11-16T10:44:14.540 回答
2

我建议您改用jVectorMap。它支持使用鼠标或触摸事件进行缩放/平移。

于 2012-11-13T15:07:42.040 回答