將縮放/平移腳本添加到Google Geochart的SVG

我正在嘗試使用google geochart API生成的地圖實現某種縮放/平移功能。有一些腳本可以在線縮放/平移svg圖像，但我沒有成功將它們實現到geochart api生成的SVG。將縮放/平移腳本添加到Google Geochart的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中的功能，因爲e xpected。

我不知道，如果這條線是正確的，因爲我沒有找到任何聯機例如：

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

難道我做錯了什麼，或者什麼，我試圖做將是不可能的？

感謝您的幫助！乾杯卡洛斯

來源

2012-11-06 CMoreira

經過一番實驗後，我找到了一個簡單的解決方案，並且迄今爲止還沒有任何有價值的答案，所以我決定分享我迄今爲止所擁有的。

我決定用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'; 
}

我知道這是對一個非常貧窮的縮放/平移功能谷歌geochart API，但它的東西，對不對？

任何改進這個簡單的aproach將受到歡迎。謝謝！

來源

2012-11-16 10:44:14 CMoreira

我建議您嘗試jVectorMap來代替。它支持帶有鼠標或觸摸事件的縮放/平移。

來源

2012-11-13 15:07:42 bjornd

謝謝您的建議。我已經知道jVectorMap，它確實是一個非常好的腳本，但在這種情況下，它對我沒有用處，因爲這裏的目的是使它適用於geochart api。不管怎麼說，還是要謝謝你！ – CMoreira

感謝這個提示，這正是我期待的:) – stix

將縮放/平移腳本添加到Google Geochart的SVG

回答

相關問題