我有一个问题：我有一个交互式地图，我从另一个开发人员那里继承了这个项目的一半。有两张地图，一张用于世界，一张用于美国。他让美国完成了，所以为了让世界地图发挥作用，我复制了JS并创建了一个新实例，我将ID从美国替换为世界。这很棒！唯一的问题是它禁用了US功能。有什么想法吗？
这是美国地图代码：
<script language="javascript" type="text/javascript">
jQuery(document).ready(function(){
var viewable_us_projects = {
1:{
coord: {x: 175, y: 300},
title: "Project Title",
location: "Apache Junction, AZ",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client Name",
link: "/#",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
}
}
var other_us_projects = {
2:{
coord: {x: 155, y: 242},
title: "Project Title",
location: "Beaver Dam, AZ",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client Name",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
3:{
coord: {x: 32, y: 215},
title: "Project Title",
location: "Brentwood, CA",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
4:{
coord: {x: 82, y: 287},
title: "Project Title",
location: "Calabasas, CA",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
5:{
coord: {x: 257, y: 168},
title: "Project Title",
location: "Craig, CO",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
6:{
coord: {x: 234, y: 220},
title: "Project Title",
location: "Durango, CO",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
7:{
coord: {x: 723, y: 189},
title: "Project Title",
location: "Dover, DE",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
8:{
coord: {x: 600, y: 293},
title: "Project Title",
location: "Atlanta, GA",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
9:{
coord: {x: 242, y: 458},
title: "Project Title",
location: "Atlanta, GA",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
10:{
coord: {x: 240, y: 460},
title: "Project Title",
location: "Laie, HI",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
11:{
coord: {x: 120, y: 100},
title: "Project Title",
location: "Boise, ID",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
12:{
coord: {x: 180, y: 118},
title: "Project Title",
location: "Idaho Falls, ID",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
13:{
coord: {x: 540, y: 134},
title: "Project Title",
location: "Chicago, IL",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
14:{
coord: {x: 482, y: 137},
title: "Project Title",
location: "Waterloo, IA",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
15:{
coord: {x: 503, y: 367},
title: "Project Title",
location: "New Orleans, LA",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
16:{
coord: {x: 410, y: 194},
title: "Project Title",
location: "Fort Riley, KS",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
17:{
coord: {x: 702, y: 189},
title: "Project Title",
location: "Bethesda, MD",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
18:{
coord: {x: 437, y: 192},
title: "Project Title",
location: "Kansas City, MO",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
19:{
coord: {x: 814, y: 83},
title: "Project Title",
location: "Bridgetown, ME",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
},
20:{
coord: {x: 194, y: 53},
title: "Project Title",
location: "Bozeman, MT",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
}
}
jQuery.each(viewable_us_projects, function(i, val) {
jQuery(".us-map").append(
'<div id="point-' + i + '" class="orange-loc" style="top:' + val.coord.y + 'px; left: ' + val.coord.x + 'px;"></div>');
new_popup = jQuery("#popup-template").clone();
new_popup.addClass("orange-popup");
new_popup.attr("id", "popup-" + i);
// new_popup.addClass("show");
new_popup.find(".popup-image img").attr('src',val.image);
new_popup.find(".title").html(val.title);
new_popup.find(".location span").html(val.location);
new_popup.find(".size span").html(val.size);
new_popup.find(".date span").html(val.date);
new_popup.find(".client span").html(val.client);
new_popup.find(".link a").attr('href', val.link);
new_popup.css({
"top":val.coord.y - 155,
"left":val.coord.x - 50
});
new_popup.appendTo(".us-map");
});
jQuery.each(other_us_projects, function(i, val) {
jQuery(".us-map").append(
'<div id="point-' + i + '" class="green-loc" style="top:' + val.coord.y + 'px; left: ' + val.coord.x + 'px;"></div>'
);
new_popup = jQuery("#popup-template").clone();
new_popup.addClass("green-popup");
new_popup.attr("id", "popup-" + i);
// new_popup.addClass("show");
new_popup.find(".popup-image img").attr('src',val.image);
new_popup.find(".title").html(val.title);
new_popup.find(".location span").html(val.location);
new_popup.find(".size span").html(val.size);
new_popup.find(".date span").html(val.date);
new_popup.find(".client span").html(val.client);
new_popup.find(".link a").hide();
new_popup.css({
"top":val.coord.y - 155,
"left":val.coord.x - 50
});
new_popup.appendTo(".us-map");
});
jQuery(".orange-loc, .green-loc, .orange-popup, .green-popup").on("hover", function() {
var curr_popup = "#popup-" + jQuery(this).attr('id').substr(6);
jQuery(curr_popup).toggleClass("show");
});
// jQuery("html").on("click", function() {
// jQuery(".orange-popup, .green-popup").removeClass("show");
// });
// jQuery(".orange-popup, .orange-loc, .green-popup, .green-loc").on("click", function() {
// event.stopPropagation();
// });
});
</script>
这是WORLD JS代码：
<script language="javascript" type="text/javascript">
jQuery(document).ready(function(){
var viewable_world_projects = {
21:{
coord: {x: 175, y: 300},
title: "Project Title",
location: "Apache Junction, AZ",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client Name",
link: "/#",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
}
}
var other_world_projects = {
22:{
coord: {x: 155, y: 242},
title: "Project Title",
location: "Beaver Dam, AZ",
size: "144,000 SqFt",
date: "Month, Year",
client: "Client Name",
image: '/templates/cp-basetemplate-joomla3/images/item-hover-image-2.png'
}
}
jQuery.each(viewable_world_projects, function(i, val) {
jQuery(".world-map").append(
'<div id="point-' + i + '" class="orange-loc" style="top:' + val.coord.y + 'px; left: ' + val.coord.x + 'px;"></div>');
new_popup = jQuery("#popup-template").clone();
new_popup.addClass("orange-popup");
new_popup.attr("id", "popup-" + i);
// new_popup.addClass("show");
new_popup.find(".popup-image img").attr('src',val.image);
new_popup.find(".title").html(val.title);
new_popup.find(".location span").html(val.location);
new_popup.find(".size span").html(val.size);
new_popup.find(".date span").html(val.date);
new_popup.find(".client span").html(val.client);
new_popup.find(".link a").attr('href', val.link);
new_popup.css({
"top":val.coord.y - 155,
"left":val.coord.x - 50
});
new_popup.appendTo(".world-map");
});
jQuery.each(other_world_projects, function(i, val) {
jQuery(".world-map").append(
'<div id="point-' + i + '" class="green-loc" style="top:' + val.coord.y + 'px; left: ' + val.coord.x + 'px;"></div>'
);
new_popup = jQuery("#popup-template").clone();
new_popup.addClass("green-popup");
new_popup.attr("id", "popup-" + i);
// new_popup.addClass("show");
new_popup.find(".popup-image img").attr('src',val.image);
new_popup.find(".title").html(val.title);
new_popup.find(".location span").html(val.location);
new_popup.find(".size span").html(val.size);
new_popup.find(".date span").html(val.date);
new_popup.find(".client span").html(val.client);
new_popup.find(".link a").hide();
new_popup.css({
"top":val.coord.y - 155,
"left":val.coord.x - 50
});
new_popup.appendTo(".world-map");
});
jQuery(".orange-loc, .green-loc, .orange-popup, .green-popup").on("hover", function() {
var curr_popup = "#popup-" + jQuery(this).attr('id').substr(6);
jQuery(curr_popup).toggleClass("show");
});
// jQuery("html").on("click", function() {
// jQuery(".orange-popup, .green-popup").removeClass("show");
// });
// jQuery(".orange-popup, .orange-loc, .green-popup, .green-loc").on("click", function() {
// event.stopPropagation();
// });
});
</script>
最后，这是测试网站，以便您可以真正深入了解代码，如果您需要： http://vbfa.bwpcommunications.com
感谢您的帮助！
Shadna