[英]Append Zoom/Pan Script to SVG From Google Geochart
I am trying to implement some kind of Zoom/Pan features to maps generated with the google geochart API. 我正在尝试为使用google geochart API生成的地图实现某种缩放/平移功能。 There are some scripts online to zoom/pan svg images, but I am not succeeding in implementing them to the SVGs that the geochart api generates.
有一些在线脚本可以缩放/平移svg图像,但是我没有成功地将它们应用到geochart api生成的SVG中。
I am trying the SVGPan library http://code.google.com/p/svgpan/ 我正在尝试SVGPan库http://code.google.com/p/svgpan/
The code I'm using to append the script to the SVG is: 我用来将脚本附加到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);
});
Here's the jsfiddle: 这是jsfiddle:
http://jsfiddle.net/cmoreira/CetaA/ http://jsfiddle.net/cmoreira/CetaA/
With Firebug I can see the script is beeing place on the svg, but nothing happens, it doesn't implement the features in the svg, as expected. 使用Firebug我可以看到脚本正在svg上,但没有任何反应,它没有像预期的那样实现svg中的功能。
I am not sure if this line is correct, since I didn't find any example online: 我不确定这条线是否正确,因为我在网上找不到任何示例:
var script = document.createElementNS('http://www.w3.org/2000/svg', 'script');
Am I doing something wrong, or what I'm trying to do will be impossible? 我做错了什么,或者我想要做的事情是不可能的?
Thanks for you help! 谢谢你的帮助! Cheers Carlos
干杯卡洛斯
After some experiments, I was able to find a simple solution and since there were not any valuable answers so far, I decided to share what I have so far. 经过一些实验,我能够找到一个简单的解决方案,因为到目前为止还没有任何有价值的答案,我决定分享到目前为止我所拥有的。
I decided to do it with CSS, redrawing the map with different values on zoom in/out and hide the overflow with CSS. 我决定使用CSS,在放大/缩小时使用不同的值重绘地图,并使用CSS隐藏溢出。
Here's a working example: 这是一个有效的例子:
http://jsfiddle.net/cmoreira/CCUpf/ http://jsfiddle.net/cmoreira/CCUpf/
CSS CSS
#canvas {
width:400px;
height:300px;
overflow:hidden;
}
#visualization {
top:0px;
left:0px;
}
Zoom/Pan Javascript 缩放/平移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';
}
I know this is a very poor zoom/pan feature for the google geochart API, but it's something, right? 我知道谷歌geochart API这是一个非常差的缩放/平移功能,但它是什么,对吧?
Any improvements to this simple aproach would be welcomed. 对这种简单方法的任何改进都会受到欢迎。 Thanks!
谢谢!
I would recommend you to try jVectorMap instead. 我建议你试试jVectorMap 。 It has support for the zoom/pan with mouse or touch events.
它支持使用鼠标或触摸事件进行缩放/平移。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.