中国地图FLASH和JS版本

本文转载自: https://www.cnblogs.com/yetiea/archive/2012/02/15/2352632.html 作者:yetiea 转载请注明该声明。

 最近要实现在web中国地图的需求,按省份显示不同热点内容,衡量了一下还算FLASH靠谱一些,前人栽树,后人乘凉:搜到
这篇博文http://www.richbox.net/blog/?p=445,(貌似打不开了,2012.9.7日点击的时候,在这里补一下源码:点击这里 )源码作者提供的也有,修改了一番用在项目中暂时满足需求,效果图如下:
 
                     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", "ply", "750", "520", "10", "#ffffff");
s1.addParam(
"allowfullscreen", "true");
s1.addParam(
"allownetworking", "all");
s1.addParam(
"allowscriptaccess", "always");
s1.addParam(
"wmode", "transparent");
s1.addVariable(
"title", "FLASH_CHINAMAP");
//s1.addVariable("xmlurl", url);
s1.addVariable("xmlurl", "data/d.xml");
s1.addVariable(
"jsHandler", "eventHandler");
s1.write(
"container");
</script>
</body>
</html>

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

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

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

  
             jquery插件中国省图(木有南海那一片数据,无政治立场,囧。注:可以截个其他地方的图用CSS控制下定位放到页面上)

  主要源码如下,数据源直接用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">
$(
function () {
//数据可以动态生成,格式自己定义,cha对应china-zh.js中省份的简称
var dataStatus = [{ cha: 'HKG', name: '香港', des: '<br/>无活动点' },
{ cha:
'HAI', name: '海南', des: '<br/>无活动点' },
{ cha:
'YUN', name: '云南', des: '<br/>无活动点' },
{ cha:
'BEJ', name: '北京', des: '<br/>2个活动点' },
{ cha:
'TAJ', name: '天津', des: '<br/>无活动点' },
{ cha:
'XIN', name: '新疆', des: '<br/>无活动点' },
{ cha:
'TIB', name: '西藏', des: '<br/>无活动点' },
{ cha:
'QIH', name: '青海', des: '<br/>无活动点' },
{ cha:
'GAN', name: '甘肃', des: '<br/>无活动点' },
{ cha:
'NMG', name: '内蒙古', des: '<br/>无活动点' },
{ cha:
'NXA', name: '宁夏', des: '<br/>无活动点' },
{ cha:
'SHX', name: '山西', des: '<br/>无活动点' },
{ cha:
'LIA', name: '辽宁', des: '<br/>无活动点' },
{ cha:
'JIL', name: '吉林', des: '<br/>无活动点' },
{ cha:
'HLJ', name: '黑龙江', des: '<br/>无活动点' },
{ cha:
'HEB', name: '河北', des: '<br/>无活动点' },
{ cha:
'SHD', name: '山东', des: '<br/>无活动点' },
{ cha:
'HEN', name: '河南', des: '<br/>无活动点' },
{ cha:
'SHA', name: '陕西', des: '<br/>无活动点' },
{ cha:
'SCH', name: '四川', des: '<br/>无活动点' },
{ cha:
'CHQ', name: '重庆', des: '<br/>无活动点' },
{ cha:
'HUB', name: '湖北', des: '<br/>1个活动点' },
{ cha:
'ANH', name: '安徽', des: '<br/>无活动点' },
{ cha:
'JSU', name: '江苏', des: '<br/>无活动点' },
{ cha:
'SHH', name: '上海', des: '<br/>1个活动点' },
{ cha:
'ZHJ', name: '浙江', des: '<br/>无活动点' },
{ cha:
'FUJ', name: '福建', des: '<br/>无活动点' },
{ cha:
'TAI', name: '台湾', des: '<br/>无活动点' },
{ cha:
'JXI', name: '江西', des: '<br/>无活动点' },
{ cha:
'HUN', name: '湖南', des: '<br/>无活动点' },
{ cha:
'GUI', name: '贵州', des: '<br/>无活动点' },
{ cha:
'GXI', name: '广西', des: '<br/>无活动点' },
{ cha:
'GUD', name: '广东', des: '<br/>无活动点'}];
$(
'#container').vectorMap({ map: 'china_zh',
color:
"#B4B4B4", //地图颜色
onLabelShow: function (event, label, code) {//动态显示内容
$.each(dataStatus, function (i, items) {
if (code == items.cha) {
label.html(items.name
+ items.des);
}
});
}
})
$.each(dataStatus,
function (i, items) {
if (items.des.indexOf('') != -1) {//动态设定颜色,此处用了自定义简单的判断
var josnStr = "{" + items.cha + ":'#00FF00'}";
$(
'#container').vectorMap('set', 'colors', eval('(' + josnStr + ')'));
}
});
$(
'.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下修改后还是无法读取数据文件。
————————————————————————————————————————————————————————————————————————————————
  后记:FLASH版本的地图原作者的个人blog打不开了(2012.9.7日标记),在这里补一下修改了原作者的代码包。点击这里

 

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值