中国地图FLASH和JS版本

发布时间：2020-12-15 18:33:36 所属栏目：百科来源：网络整理

导读：转自：http://www.cnblogs.com/yetiea/archive/2012/02/15/2352632.html 最近要实现在web中国地图的需求，按省份显示不同热点内容，衡量了一下还算FLASH靠谱一些，前人栽树，后人乘凉：搜到这篇博文：http://www.richbox.net/blog/?p=445，源码作者提供的也

转自：http://www.cnblogs.com/yetiea/archive/2012/02/15/2352632.html

最近要实现在web中国地图的需求，按省份显示不同热点内容，衡量了一下还算FLASH靠谱一些，前人栽树，后人乘凉：搜到
这篇博文：http://www.richbox.net/blog/?p=445，源码作者提供的也有，修改了一番用在项目中暂时满足需求，效果图如下：

　　　　　　　　　　　　　　　　　　　　　flash中国地图
　　主要调用部分源码，生成的SWF文件修改了原作者一点代码，AS源代码和相关数据文件data/d.xml添加了alpha参数调节颜色。

FLASH_中国省图

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>基于FLASH的中国地图</title>
    <script type="text/javascript" src="js/swfobject.js" />
    <script type="text/javascript>
        function eventHandler(e) {
            alert(e.value);
        }
    </script>
   
</head>
<body>
    <div id="container" style="margin-left: 45px; padding-top: 10px; padding-left: 10px;
        background: white; width: 650px; height: 530px;">
    </div>
     <script type="text/javascript">
         //var url = "AjaxHandler.ashx?flag=flashXML";  此处可调用后台动态生成如data/d.xml的数据文件
var s1 = new SWFObject(ChinaMap.swf,ply75052010#ffffff);
         s1.addParam(allowfullscreentrueallownetworkingallallowscriptaccessalwayswmodetransparent);
         s1.addVariable(titleFLASH_CHINAMAP);
         s1.addVariable("xmlurl",url);
         s1.addVariable(xmlurldata/d.xmljsHandlereventHandler);
         s1.write(container);
    </script>
</body>
</html>

　　上线以后老大用在ipad上拿去忽悠客户作展示，杯具了，一声命令下来，改！

　　于是同事又搜罗到jquery插件的这个版本（http://jvectormap.owl-hollow.net/#overview）的中文版本数据(PS:当初自己在实现功能时木找到中文数据包)。用的是浏览器SVG画图。

　　效果图如下，显示和FLASH还是有不少差距。

　　　　　　　　　　　　　　　　　　　　　　jquery插件中国省图（木有南海那一片数据，无政治立场，囧）

　　主要源码如下，数据源直接用json来模拟了。

JQUERY中国省图

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>基于jquery的中国地图</title>
    <link href="js/jquery.vector-map.css" media="screen" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="js/jquery.vector-map.js" type="text/javascript"></script>
    <script src="js/china-zh.js" type="text/javascript"></script>
    <script type="text/javascript">
        $( () {
            数据可以动态生成，格式自己定义，cha对应china-zh.js中省份的简称 dataStatus  [{ cha: 'HKG香港<br/>无活动点 },{ cha: HAI海南YUN云南BEJ北京<br/>2个活动点TAJ天津XIN新疆TIB西藏QIH青海GAN甘肃NMG内蒙古NXA宁夏SHX山西LIA辽宁JIL吉林HLJ黑龙江HEB河北SHD山东HEN河南SHA陕西SCH四川CHQ重庆HUB湖北<br/>1个活动点ANH安徽JSU江苏SHH上海ZHJ浙江FUJ福建TAI台湾JXI江西HUN湖南GUI贵州GXI广西GUD广东}];
            $(#container).vectorMap({ map: china_zh#B4B4B4地图颜色                onLabelShow:  (event,label,code) {动态显示内容                    $.each(dataStatus, (i,items) {
                        if (code == items.cha) {
                            label.html(items.name + items.des);
                        }
                    });
                }
            })
            $.each(dataStatus,items) {
                 (items.des.indexOf(个) != -1) {动态设定颜色，此处用了自定义简单的判断 josnStr = {"  items.cha + :'#00FF00'};
                    $().vectorMap(setcolors(' )));
                }
            });
            $(.jvectormap-zoomin).click(); 放大        });
      
    </script>
</head>
<body>
    <div id="container" style="margin-left: 45px; padding-top: 10px; padding-left: 10px;
        background: white; width: 650px; height: 530px;">
    </div>
</body>
</html>

　　PS:整个代码包点击这里，显示FLASH需要用VS打开或直接发布到IIS以及其他webserver上，否则SWF文件无法读取本地数据文件d.xml，在XP下按照网上一些修改方法

能够实现，但我在win7下修改后还是无法读取数据文件。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!