div+css+js实现深圳交互地图
前段时间，因为项目需要找了很多网上资源关于深圳地图的，都不太理想。于是整理了一份适用于项目的交互地图供大家参考，提供思路。里面有个805.svg的文件是引用了里面的path标签的坐标值，应用到chinamapPath.js里面替换，后期可以实现交互数据绑定。如果想换成地区交互地图，可以先让设计师提供.svg格式的矢量图形，然后取里面的坐标值即可。在使用过程中，大家可以集思广益，举一反三进行优化完善。初步模型，不够精致，学习共勉。
html代码参考：
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="chinamapPath.js"></script>
</head>
<body>
<div id="main">
<div class="demo">
<div id="map"></div>
</div>
</div>
<script type="text/javascript">
window.onload = function () {
var R = Raphael("map", 805, 350);
paintMap(R);
var textAttr = {
"fill": "#fff",//文字颜色
"font-size": "12px",
"cursor": "pointer"
};
for (var state in shenzhen) {
shenzhen[state]['path'].color = Raphael.getColor(0.9);
(function (st, state) {
//获取当前图形的中心坐标
var xx = st.getBBox().x + (st.getBBox().width / 2);
var yy = st.getBBox().y + (st.getBBox().height / 2);
//***修改部分地图文字偏移坐标
switch (shenzhen[state]['name']) {
case "龙华":
xx +=0;
yy -= 5;
break;
case "宝安区":
xx -=70;
yy += 20;
break;
case "南山区":
xx += 10;
yy += 10;
break;
case "蛇口":
xx += -10;
yy += 0;
break;
case "福田区":
xx -= 10;
break;
case "罗湖区":
yy -= 10;
break;
case "盐田区":
xx +=2;
yy -=5;
break;
case "龙岗区":
xx += 5;
yy += 10;
break;
case "坪大":
xx +=30;
yy -=30;
break;
default:
}
//写入文字
shenzhen[state]['text'] = R.text(xx, yy, shenzhen[state]['name']).attr(textAttr);
st[0].onmouseover = function () {
st.animate({fill: st.color, stroke: "#eee"}, 500);
shenzhen[state]['text'].toFront();
R.safari();
};
st[0].onmouseout = function () {
st.animate({fill: "#4CC2EA", stroke: "#eee"}, 500);
shenzhen[state]['text'].toFront();
R.safari();
};
})(shenzhen[state]['path'], state);
}
}
</script>
</body>
</html>
chinamapPath.js文件的关键贴码：
shenzhen.longhua = {
name: "龙华",
path: R.path("M294.403,153.232l-13.585,9.622c0,0-3.396,2.52,4.964,12.601l-0.783,3.665l-4.702,6.872l1.566,5.729l-0.261,8.705l7.315,2.292l0.783,7.56c0,0,13.585,8.247,13.848,9.164c0.261,0.915-6.793,10.081-6.793,10.081l-3.135,0.457l-0.785,1.833l-7.576-0.458l-3.919,0.687h-2.351h-5.747h-6.794c0,0-6.27,0.915-7.053,1.146c-0.785,0.229-4.442,2.062-4.442,2.062l0.522-11.226l-1.045-1.145c0,0-0.783-4.123-0.783-5.27c0-1.146,0-2.29-0.785-2.29c-0.783,0-5.747,0-5.747,0s-8.622-5.957-6.792-13.289c1.829-7.331-13.063-8.706-14.892-8.934c-1.828-0.229-0.26-7.562-3.396-7.562s-12.019-1.374-12.802-1.374c-0.783,0-6.53,2.29-6.792-2.749c-0.263-5.04-2.875-6.643-2.875-6.643s6.271-4.813,6.792-7.332c0.523-2.521-0.783-9.164-4.441-9.622c-3.657-0.459,4.703-15.809,4.964-16.496c0.261-0.687,6.793-8.706,6.793-8.706l-3.918-6.414c0,0-1.307-5.956-0.262-6.645c1.044-0.687,8.098-5.727,8.098-5.727s9.667,4.353,10.451,5.956c0.783,1.604,5.486,0.688,5.486,0.688l3.135,3.894l6.794-0.458l1.305-0.688l0.786,2.52l0.783,2.291l2.612,1.375l-0.522,5.041l-0.783,1.833l-0.523,5.499c0,0,9.667,7.33,10.451,7.33s5.486,3.895,5.486,3.895s16.458-4.582,18.288-5.269C283.169,147.046,292.574,149.108,294.403,153.232z").attr(attr)
};
.....完整案例的相关css文件和JS文件较多，可以移至资源下载目录进行下载。
div+css+js实现深圳交互地图相关推荐
- 下拉的DIV+CSS+JS二级树型菜单，刷新无影响
二级菜单,不论展开几个栏目,刷新不影响! Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- DIV+CSS+JS二级树型菜单，刷新无影响
二级菜单,不论展开几个栏目,刷新不影响! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
- html菜单树实现原理,HTML_DIV+CSS构成树型菜单，这是用DIV+CSS+JS构成的树型菜单 - phpStudy...
DIV+CSS构成树型菜单 这是用DIV+CSS+JS构成的树型菜单,采用列表,符合WEB标准,在大多数WIN浏览器下,兼容性不错, xhtml见效果页,我现在做的是二个菜单,如果需要添加,可把 .. ...
- 大鱼海棠国漫主题HTML前端网页设计成品预览与讲解DIV CSS JS
国漫大鱼海棠主题,本套大作业共计10个页面,页面美观度较高,网页在细节设计上花了很大功夫,如边框.阴影,鼠标滑过效果等,运用的知识点有:Div+CSS.JS轮播图.Table.下拉菜单栏.视频.表单. ...
- div+css+js 树形菜单
2019独角兽企业重金招聘Python工程师标准>>> 代码: <div class="main_2"> <div class=" ...
- 效果直逼flash的Div+Css+Js菜单
http://www.dzhai.com/blog/article.asp?id=153 <html> <head> <meta http-equiv="Con ...
- html 向上滚动 不间断,向上不间断滚动div+css+js模板
div+css不间断向上滚动模板 上一次给大家介绍一种div css的不间断滚动代码JS特别多(不间断滚动css代码),这次给大家介绍的是比较实用比较简单的不间断css滚动代码 DIV+CSS不间断滚 ...
- 对用DIV+CSS+JS实现多子部门组织结构图的改进
这是回复论坛一坛友的问题涉及到的. 因为我把广告从HOST里禁了,所以CSDN论坛里面回复时的编辑器其它功能都没了,只有一个简单的输入框.简洁不少,可是不仅不能发图片,而且打字也都反应很慢,比起博客编 ...
- HTML+CSS+JS实现 ❤️echarts省市区地图城市选择❤️
效果演示: 代码目录: 主要代码实现: CSS样式: * {margin: 0;padding: 0; }body {font-family: Exo, '-apple-system', 'Open ...
- 一步步教你用html+div+css+js基于Jquery实现一套数字华容道游戏
游戏分析 说起华容道游戏,可真的是经典游戏了,记得小时候有那种塑料的拼图板,能让人玩上一整天,有时候半天搞不定,光想给每个块块抠出来重新组上去,现在有电脑了,自己还是个从业多年的菜鸟程序员,是时候学习 ...
最新文章
- css3的3d起步——分享
- 三行代码接入，社交软件打字时底下弹出的表情布局,自定义ViewPager+页面点标+各种功能的android小框架。...
- ubuntu下安装java和tomcat安装
- C# 每月第一天和最后一天
- Android 精品资源（一） 2018年3月23日 星期五
- .Net 程序集 签名工具sn.exe 密钥对SNK文件 最基本的用法
- python的userlist_Python Collections.UserList用法及代码示例
- 字符串匹配-kmp算法
- 机器学习中的偏差和方差理解
- 免费分享一套详细的Hadoop学习视频
- XPS10.1仿真PPC440步骤及遇到的问题
- 5种方式实现 Java 单例模式
- 用Arduino和蓝牙模块做一个开门装置
- 【CSS】537- 认真介绍 CSS 原理
- 【毕业设计】大数据淘宝用户行为数据分析与可视化 - flink
- python里使用协程和StreamReader、StreamWriter来创建echo服务端
- 【tkinter组件专栏】Scrollbar：横滚竖滚滚动条
- 使用 FFmpeg 开发播放器基础--使用 ffmpeg 解码视频文件
- Android盒子看百度云,【沙发管家】智能电视和电视盒子如何使用百度网盘的方法！看你想看的片子！...
- java中的 | ^ 分别是什么？