0
我已经下载了interactive map,我试图将它放入框架集中。 我已经创建了一个main_page.html
,含有:带有从一帧到另一帧链接的帧的Html页面(带有交互式地图)
<html>
<frameset cols="30%,70%" frameborder=no border=no framespacing=no>
<frame src="map.html" name="frame_map">
<frame src="right.htm" name="frame_chart">
</frameset>
</html>
文件map.html
(我购买)具有的CSS和config.js为地图的工作。 用于配置管脚(其可以在地图被用于城市)的典型代码如下:
{
'shape':'circle',
'hover': 'Manchester',
'pos_X':209,
'pos_Y':300,
'diameter':8,
'outline':'#FFCECE',
'thickness':1,
'upColor':'#FF0000',
'overColor':'#FFEE88',
'downColor':'#00ffff',
'url':'http://www.html5interactivemaps.com',
'target':'same_window',
'enable':true,
},
然而,在地图上仅允许“same_window”或“new_window”作为链接目标。我想这将扩大到右边框上我的框架集(即frame_chart如main_page.html
定义。 我认为除了应该在下面的代码进行...... 但如何?
function addEvent(id,relationId){
var _obj = $('#'+id);
var _Textobj = $('#'+id+','+'#'+map_config[id]['namesId']);
_obj.attr({'fill':map_config[id]['upColor'],'stroke':map_config['default']['borderColor']});
_Textobj.attr({'cursor':'default'});
if(map_config[id]['enable'] == true){
if (isTouchEnabled()) {
//clicking effect
_Textobj.on('touchstart', function(e){
var touch = e.originalEvent.touches[0];
var x=touch.pageX+10, y=touch.pageY+15;
var tipw=$('#map-tip').outerWidth(), tiph=$('#map-tip').outerHeight(),
x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(20*2) : x
y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
$('#'+id).css({'fill':map_config[id]['downColor']});
$('#map-tip').show().html(map_config[id]['hover']);
$('#map-tip').css({left:x, top:y})
})
_Textobj.on('touchend', function(){
$('#'+id).css({'fill':map_config[id]['upColor']});
if(map_config[id]['target'] == 'new_window'){
window.open(map_config[id]['url']);
}else if(map_config[id]['target'] == 'same_window'){
window.parent.location.href=map_config[id]['url'];
}
})
}
_Textobj.attr({'cursor':'pointer'});
_Textobj.hover(function(){
//moving in/out effect
$('#map-tip').show().html(map_config[id]['hover']);
_obj.css({'fill':map_config[id]['overColor']})
},function(){
$('#map-tip').hide();
$('#'+id).css({'fill':map_config[id]['upColor']});
})
//clicking effect
_Textobj.mousedown(function(){
$('#'+id).css({'fill':map_config[id]['downColor']});
})
_Textobj.mouseup(function(){
$('#'+id).css({'fill':map_config[id]['overColor']});
if(map_config[id]['target'] == 'new_window'){
window.open(map_config[id]['url']);
}else if(map_config[id]['target'] == 'same_window'){
window.parent.location.href=map_config[id]['url'];
}
})
_Textobj.mousemove(function(e){
var x=e.pageX+10, y=e.pageY+15;
var tipw=$('#map-tip').outerWidth(), tiph=$('#map-tip').outerHeight(),
x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(20*2) : x
y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
$('#map-tip').css({left:x, top:y})
})
}
}
!
在此先感谢
谢谢你。我已经尝试过,但它没有工作。在地图上点击时没有任何反应 – Andreuccio
您是否在配置中将目标更改为帧? –
是的,我有。我已经添加了'map_config'和'pin_config'的代码。 现在我的典型销读取: '{ '形状': '圆', '悬停': '曼彻斯特', 'POS_X':209, 'POS_Y':300, '直径':8, 'outline':'#FFCECE', 'thickness':1, 'upColor':'#FF0000', 'overColor':'#FFEE88', 'downColor':'#00ffff', 'url' :'http://www.html5interactivemaps.com', 'target':'frame', 'enable':true, },' – Andreuccio