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 に答える