中国地图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日标记），在这里补一下修改了原作者的代码包。点击这里
中国地图FLASH和JS版本相关推荐
- 中国地图，世界地图js，json汉化及英文版免费下载地址
中国地图,世界地图js,json下载地址 1.由于Echarts现在已经关闭了很多地图资源的js,json文件,所以官网中已经找不到这类相关的资源,为了给大家方便,特此上传该地址: //由于版权原因所 ...
- Echarts中国地图的china.js下载
今天用到了Echarts的中国地图map,但Echarts官网的地图js已经停止提供下载了,找了下其他的链接放到这里,一些其他会用到的js文件也在里面可以找到,省的下次用现找:https://gith ...
- Echarts关于中国地图的china.js文件下载
原文出处:https://blog.csdn.net/weixin_36413887/article/details/80019625 早上用到Echarts的中国地图map时,需要用到china.j ...
- 中国地图 echarts china.js 无乱码
echarts绘制中国地图. 链接:https://pan.baidu.com/s/1PoLfdTel3hYVlVcQhPwO0A 提取码:9s1s 内含地图源码,china.js. 调整了省份名称的 ...
- echarts，map中国地图点击各省，跳转展示，从省返回到中国地图【china.js】
效果图: 1.点击省,跳转到河北省 2.返回,从省返回到中国地图 话不多说,直接上代码,1.复制粘贴,2.在引入对应js即可 注:全部各省地图,下载地址:** <!DOCTYPE html> ...
- 【百度地图API】JS版本的常见问题
1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...
- echarts 画中国地图缺少 china.js
把我使用正常的 china.js 直接复制在这里,需要自取啦: (function (root, factory) {if (typeof define === 'function' &&am ...
- Vue中使用echart实现中国地图统计图
Vue中使用echart实现中国地图统计图 前言 Echart版本的确定 全局导入或按需导入 在对应的页面调用echart 前后端数据交互注意事项 前言 在Vue2.x开发中,为了更好地展示某一个时间 ...
- 【微信小程序+echarts点亮中国地图】微信小程序echarts中国地图点亮功能
0 小程序开发背景 1 下载官方Github项目 2 按照Echarts官网的map示例使用 3 点击事件的函数 效果图 0 小程序开发背景 前段时间在上学校的软件开发与实践B课程 因为赶上了工大百年 ...
最新文章
- IDEA多行缩进快捷键
- windows安装oracle11g
- 微信公众号文章质量评分算法详解
- nohup 不生成日志_js页面触发chargeRequest事件和Nginx获取日志信息
- Chrome 开发者工具 版本 65 新引入的 Overrides
- oracle查看物化视图的索引,oracle – 物化视图中的域索引返回零行
- 关系数据模型和关系数据库系统
- iOS开发那些事-Git在Xcode中的配置与使用
- (10)verilog语言编写SPI发送
- Python中的字符串定义
- 《快乐编程大本营》java语言训练班 1课:第一个java程序：你好，范冰冰；
- 电容的q值计算公式_（生活小贴士）一分钟了解“三星贴片电容的结构与材料特性”...
- js中字符串正则表达式、正则法则pattern、RegExp、flags、exec
- 极限编程XP的核心实践是什么？
- org.apache.ibatis.reflection.ReflectionException: There is no getter for property named ‘medicinesId
- 《Java就业培训教程》_张孝祥_书内源码_07
- 家庭mesh网络与IPTV的搭建
- 单设施选址-重心法-Matlab
- 计算机网络网线制作工具有,网线制作工具 网线水晶头制作过程详解(视频+图文教程)...
- 18 个开源翻译工具帮助你的项目本地化