Question

我正在尝试查找或创建世界地图，例如当您悬停时，大陆会被选中并会显示所选国家/地区的弹出窗口，如以下网站或类似内容：http://ilfc.com/customers.htm 您是否知道下载Ajax，jQuery或flash编码地图的任何来源以及是否创建最适合使用的技术？

Answer 1

之前我做过类似的事情并使用了以下技巧。

首先你需要一些图像。世界地图和每个突出显示的国家/地区的图形与世界地图的分辨率相同。突出显示的国家/地区必须与世界地图上的位置相同！最后一张图片是空白的。

现在创建一个包含国家形状的imagemap。

下一步，创建三个“层”，它们将相互叠加。背景中的图层将显示世界地图。第二个将显示突出显示的国家/地区。在顶部使用空白图像和图像映射。假设imagemap中的每个区域都有国家/地区的名称作为id，您可以使用以下基于jquery的脚本：

$(document).ready(function () {
    $('#idoftheimagemap area').each(function () {
        $(this).hover(
            function () {
                //assuming it is an image
                $('#idofthehighlightlayer').attr('src', 'images/' + $(this).attr('id') + '.png');
            },
            function () {
                $('#idofthehighlightlayer').attr('src', 'images/blank.png');
            }
        );
    });
});

对于弹出窗口，您可以使用qtip。

Answer 2

有许多Javascript Web映射包可以跨浏览器工作，让你做这种事情。尝试使用OpenLayers - 您需要做的就是将区域边界作为GML或其他一些支持的格式提供，然后编写突出显示并单击处理程序。

www.openlayers.org

如何创建动画世界地图，例如当您将鼠标悬停在其上时，会突出显示一个大陆，并显示所选国家/地区的弹出窗口

2 个答案: