沙龙活动 | 3月31日 京东、微博实战专家与你共同探讨容器技术实践！
小时候我们玩过拼图游戏，是用自己的手去拼的。今天我们来研究研究用javascript来拼图。同样是拼图，但用js拼图要比用手拼图麻烦多了，因此以后我要把它优化成引擎。
以上是一段导语，话不扯远，对《三国志曹操传》熟悉的玩家知道，《三国志曹操传》的地图是由小地图块拼成的，那要实现它就和导语说得一样：很麻烦。不过即使麻烦也是一门技术，因此在此分享给大家，希望大家喜欢。
二、代码讲解
今天我要换换讲解方式，先不给代码，我们先来想想原理。现在，假如你有一幅图片，把它裁开成若干份，并打乱。现在如果让你用js把他们组织起来，如何做呢？先不说图的顺序，首先来看把它们弄在一起就很难了。这时我减少难度，给你几个选择：
A.用margin慢慢调
B.用数组把它们排列好
在这道题中，选A是很不明智的，选C就代表你也拿不定主意。看来选B是最好的。既然都告诉大家用数组，那就先上代码吧。免得消磨大家兴致。
*If you want to add hurdle, find string: "{{Add hurdle above." and "{{After add hurdle, add the hurdle to the vector above." please.
*If you want to add or change type of grid, find string: "{{Add new grid above.".
*If you want to change position of map, please find string: "{{Change map margin above.".
*If the icon of crid is changed, you have to change the size of icon. Find "{{Change icon size above." to change size.
//Map of hurdle or military or resource.
var vView = [];
/*Remarks:
*L: land *S: sea *R: river *W: swamp *A: lawn *B: bridge *H: house *h: hospital *w: warehouse *b: bourse *M: military academy *m: military factories
*r: research Center *P: port *D: dock *s: Shipyard
var mScene = {
'L': ['./land.png', '陆地']
, 'S': ['./sea.png', '河流']
, 'T': ['./tree.png', '树木']
, 'B': ['./bridge.png', '桥']
, 'C': ['./beach.png', '沙滩']
//{{Add new grid above.
var mCurrent = {
, right: -1
, bottom: -1
, Position: {
, Type: 'NONE'
var mTitle = {};
var sHurdleONE =
'S,S,S,S,S,S,S,S,S,S,S'
+ ';T,L,T,T,T,T,S,S,S,S,T'
+ ';T,L,L,T,S,S,S,S,S,L,T'
+ ';T,L,L,L,C,C,C,S,S,T,S'
+ ';T,L,L,L,C,C,C,B,B,L,T'
+ ';T,L,L,C,C,C,C,S,S,L,T'
+ ';T,L,L,C,C,T,S,S,L,L,T'
//{{Add hurdle above.
var vHurdles = [sHurdleONE];
//{{After add hurdle, add the hurdle to the vector above.
function _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin)
var mCoordMember = {
left: nWidthBasic
, top: nHeightBasic
, right: nWidthBasic + nPicWidth
, bottom: nHeightBasic + nPicHeight
var mPositionMember = {
X: (mCoordMember.left - mMargin.x) / nPicWidth
, Y: (mCoordMember.top - mMargin.y) / nPicHeight
var mItem = {
Coord: mCoordMember
, Position: mPositionMember
, Type: cType
function _loadHurdle(sHurdle)
var nBasic = 0;
var nWidthBasic = nB
//margin-left.
var nHeightBasic = 0;
//margin-top.
//{{Change map margin above.
var nPicWidth = 45;
//Picture width is nBasic.
var nPicHeight = 45;
//Picturn height is nHeightBasic.
//{{Change icon size above.
var v = sHurdle.split(';');
var vRec = [];
for(nSub = 0; nSub & v. nSub++){
var vCrid = v[nSub].split(',');
vRec[vRec.length] = vC
for(nRow = 0; nRow & vRec. nRow++){
var vCol = vRec[nRow];
for(nCol = 0; nCol & vCol. nCol++){
var cType = vCol[nCol];
var mMargin = {x: nBasic, y: nBasic};
vView[vView.length] = _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin);
nWidthBasic += nPicW
nHeightBasic += nPicH
nWidthBasic = nB
//Show map with vector 'vView'.
function _showMap(sID)
var xDiv=document.getElementById(sID);
var nTop = 0;
var sIdPrefix = 'ID_IMG_NUM_';
var sIdGrid = 'ID_A_NUM_';
for(nSub = 0; nSub & vView. nSub++){
var mGrid = vView[nSub];
if(mGrid){
var xMargin = mGrid.C
var cType = mGrid.T
var xProper = mScene[cType];
if(xProper){
xGrid = document.createElement('a');
xImg = document.createElement('img');
xImg.style.position = 'absolute';
xImg.style.marginLeft = xMargin.
xImg.style.marginTop = xMargin.
xImg.src = xProper[0];
xImg.style.border = '0px solid #000000';
xImg.id = sIdPrefix + nS
xImg.style.width = 45;
xImg.style.height = 45;
xImg.style.display = 'block';
xGrid.onclick = function(e){
var xCurrentGrid = e.
var sId = xCurrentGrid.
var nIdAsSub = parseInt(sId.substring(sIdPrefix.length, sId.length));
mCurrent = vView[nIdAsSub];
if(!mCurrent){
alert("Error 0004.");
xGrid.title = xProper[1] + '(' + parseInt(mGrid.Position.X) + ', ' + parseInt(mGrid.Position.Y+2) + ')';
xGrid.id = sIdGrid + nS
xGrid.appendChild(xImg);
xDiv.appendChild(xGrid);
alert("Error: 0003.");
alert("Error: 0002.");
//Show map of hurdle.
function _showHurdle(nHurdle)
if(vHurdles[nHurdle - 1]){
_loadHurdle(vHurdles[nHurdle - 1]);
_showMap('ID_DIV_BATTLEFIELD');
alert("Error: 0001.");
看看，这点程序就用了195行，而且这还是一张地图，看来还很有点麻烦哦。没关系，慢慢解释。
首先还是把素材放在这里.
素材不是来自《三国志曹操传》，因为没整理好《三国志曹操传》的地图素材，所以就随便找了些。不过也照样可以用。希望大家不要介意。
麻烦的代码最容易弄得乱七八糟，因此在此时要良好的区分开样式设置和拼图核心。
拼图核心在哪里呢？？？在这里：
var mScene = {
'L': ['./land.png', '陆地']
, 'S': ['./sea.png', '河流']
, 'T': ['./tree.png', '树木']
, 'B': ['./bridge.png', '桥']
, 'C': ['./beach.png', '沙滩']
//{{Add new grid above.
var mCurrent = {
, right: -1
, bottom: -1
, Position: {
, Type: 'NONE'
var mTitle = {};
var sHurdleONE =
'S,S,S,S,S,S,S,S,S,S,S'
+ ';T,L,T,T,T,T,S,S,S,S,T'
+ ';T,L,L,T,S,S,S,S,S,L,T'
+ ';T,L,L,L,C,C,C,S,S,T,S'
+ ';T,L,L,L,C,C,C,B,B,L,T'
+ ';T,L,L,C,C,C,C,S,S,L,T'
+ ';T,L,L,C,C,T,S,S,L,L,T'
//{{Add hurdle above.
var vHurdles = [sHurdleONE];
//{{After add hurdle, add the hurdle to the vector above.
首先我把S,T,B,C,L定义好，使S代表河流，T代表树木，B代表桥，C代表沙滩，L代表陆地。var mCurrent后面有用，暂不解释。然后是var mTitle，这个专门是用来显示title的，所以也不解释了。关键是在下：
var sHurdleONE =
'S,S,S,S,S,S,S,S,S,S,S'
+ ';T,L,T,T,T,T,S,S,S,S,T'
+ ';T,L,L,T,S,S,S,S,S,L,T'
+ ';T,L,L,L,C,C,C,S,S,T,S'
+ ';T,L,L,L,C,C,C,B,B,L,T'
+ ';T,L,L,C,C,C,C,S,S,L,T'
+ ';T,L,L,C,C,T,S,S,L,L,T'
这段代码就是把定义好的S,T,B,C,L连在一起的核心。后面只用定义S,T,B,C,L的宽度高度定义就能把它们连成一块。并且只要把它们在数组里的位置调一调就能改变样式。
接下来为了能切换地图，我们把第一张地图放进了数组：
var vHurdles = [sHurdleONE];
//{{After add hurdle, add the hurdle to the vector above.
如果以后加了地图，只用把地图所属的数组名加到vHurdles数组就可以了，调用是就可以直接写对应下标。
样式设置在下：
function _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin)
var mCoordMember = {
left: nWidthBasic
, top: nHeightBasic
, right: nWidthBasic + nPicWidth
, bottom: nHeightBasic + nPicHeight
var mPositionMember = {
X: (mCoordMember.left - mMargin.x) / nPicWidth
, Y: (mCoordMember.top - mMargin.y) / nPicHeight
var mItem = {
Coord: mCoordMember
, Position: mPositionMember
, Type: cType
function _loadHurdle(sHurdle)
var nBasic = 0;
var nWidthBasic = nB
//margin-left.
var nHeightBasic = 0;
//margin-top.
//{{Change map margin above.
var nPicWidth = 45;
//Picture width is nBasic.
var nPicHeight = 45;
//Picturn height is nHeightBasic.
//{{Change icon size above.
var v = sHurdle.split(';');
var vRec = [];
for(nSub = 0; nSub & v. nSub++){
var vCrid = v[nSub].split(',');
vRec[vRec.length] = vC
for(nRow = 0; nRow & vRec. nRow++){
var vCol = vRec[nRow];
for(nCol = 0; nCol & vCol. nCol++){
var cType = vCol[nCol];
var mMargin = {x: nBasic, y: nBasic};
vView[vView.length] = _createGrid(nWidthBasic, nHeightBasic, nPicWidth, nPicHeight, cType, mMargin);
nWidthBasic += nPicW
nHeightBasic += nPicH
nWidthBasic = nB
//Show map with vector 'vView'.
function _showMap(sID)
var xDiv=document.getElementById(sID);
var nTop = 0;
var sIdPrefix = 'ID_IMG_NUM_';
var sIdGrid = 'ID_A_NUM_';
for(nSub = 0; nSub & vView. nSub++){
var mGrid = vView[nSub];
if(mGrid){
var xMargin = mGrid.C
var cType = mGrid.T
var xProper = mScene[cType];
if(xProper){
xGrid = document.createElement('a');
xImg = document.createElement('img');
xImg.style.position = 'absolute';
xImg.style.marginLeft = xMargin.
xImg.style.marginTop = xMargin.
xImg.src = xProper[0];
xImg.style.border = '0px solid #000000';
xImg.id = sIdPrefix + nS
xImg.style.width = 45;
xImg.style.height = 45;
xImg.style.display = 'block';
xGrid.onclick = function(e){
var xCurrentGrid = e.
var sId = xCurrentGrid.
var nIdAsSub = parseInt(sId.substring(sIdPrefix.length, sId.length));
mCurrent = vView[nIdAsSub];
if(!mCurrent){
alert("Error 0004.");
xGrid.title = xProper[1] + '(' + parseInt(mGrid.Position.X) + ', ' + parseInt(mGrid.Position.Y+2) + ')';
xGrid.id = sIdGrid + nS
xGrid.appendChild(xImg);
xDiv.appendChild(xGrid);
alert("Error: 0003.");
alert("Error: 0002.");
以上的代码很简单，自己可以看看，提示一下：当你在自己开发的过程中如果弹出一个Error: 0002, Error: 0003, Error: 0001什么之类的，就代表出了错，需要马上去检查。这是为了在麻烦的程序开发中有一点提醒而设计的。值得注意的是：这里的图片全是createElement弄出来的，所以请不要猜疑html代码里有什么蹊跷。
function _showHurdle(nHurdle)
if(vHurdles[nHurdle - 1]){
_loadHurdle(vHurdles[nHurdle - 1]);
_showMap('ID_DIV_BATTLEFIELD');
alert("Error: 0001.");
这是在你要弄出地图的调用函数，当你在html代码里写上：&body onload="_showHurdle(nHurdle)"&几可以把拼的图一下子画出来。nHurdle就是地图在数组vHurdles里的对应下标，最低是1，而不是0，也就是说要用第一张地图,那nHurdle就该赋值为1，调用是写为：&body onload="_showHurdle(1)"&。
源代码下载：http://files.cnblogs.com/ducle/map.rar
三、演示效果
演示图在下：
由于是静态的，所以就不给demo了。这种方法虽然很麻烦，而且地图块多了就很慢，但是毕竟是种技术，如果大家有什么好的方法也可以来告诉我。
原文链接：http://www.cnblogs.com/ducle/archive//2699066.html
声明：本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至： 进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。
JS 这个后产物种真的是让人纠结。现在的狠多人用JQUERY。但jquery对模块管理，依赖管理。已经需求加载。这些都无视了。GG的closur1添加评论分享收藏感谢收起博客分类：
球面上两点间大圆劣弧的距离
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&谷歌地图计算两经纬度坐标点的距离&/title&
&script type="text/javascript"&
var EARTH_RADIUS = ; //地球半径
//将用角度表示的角转换为近似相等的用弧度表示的角 java Math.toRadians
function rad(d) {
return d * Math.PI / 180.0;
* 谷歌地图计算两个坐标点的距离
* @param lng1 经度1
* @param lat1 纬度1
* @param lng2 经度2
* @param lat2 纬度2
* @return 距离（千米）
function getDistance(lng1, lat1, lng2, lat2) {
var radLat1 = rad(lat1);
var radLat2 = rad(lat2);
var a = radLat1 - radLat2;
var b = rad(lng1) - rad(lng2);
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2)
+ Math.cos(radLat1) * Math.cos(radLat2)
* Math.pow(Math.sin(b / 2), 2)));
s = s * EARTH_RADIUS;
s = Math.round(s * 10000) / 10000;
alert(getDistance(116..6..927919));
java版谷歌地图计算两经纬度坐标点的距离
浏览: 1451894 次
来自: 北京
楼主。使用分布式session后，能解决freemarker无 ...
代码报异常啊
mysql的注释符号“-- ”，“#”，“/**/”要加上吗？ ...
Thanks for sharing!
多谢楼主分享！
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'博客分类：
在百度地图上画多边形区域，
&META http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&百度地图画多边形&/title&
&style type="text/css"&
body, html,#allmap {width: 100%;height: 100%;overflow:margin:0;}
&script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.3"&&/script&
&script type="text/javascript"&
function initialize() {
// 百度地图API功能
map = new BMap.Map("map_canvas");
map.addControl(new BMap.NavigationControl());
// 添加平移缩放控件
map.addControl(new BMap.ScaleControl());
// 添加比例尺控件
map.addControl(new BMap.OverviewMapControl());
//添加缩略地图控件
map.enableScrollWheelZoom();
//启用滚轮放大缩小
map.addControl(new BMap.MapTypeControl());
//添加地图类型控件
map.setMapType(BMAP_SATELLITE_MAP);
var point = new BMap.Point(108.896, 34.330);
// 创建点坐标
map.centerAndZoom(point,13);
// 初始化地图,设置中心点坐标和地图级别。
var polygon = new BMap.Polygon([
new BMap.Point(108..298633),
new BMap.Point(108.8075),
new BMap.Point(108..319744),
new BMap.Point(108..331431),
new BMap.Point(108.8354),
new BMap.Point(108..351223),
new BMap.Point(108..355872),
new BMap.Point(108..366123),
new BMap.Point(108..302808),
new BMap.Point(108..300422),
new BMap.Point(108..291714),
new BMap.Point(108..291833),
new BMap.Point(108..296605)
], {strokeColor:"#f50704",fillColor:"", strokeWeight:3, strokeOpacity:0,fillOpacity:0,});
map.addOverlay(polygon);
//showToolAutoDef();
&body onLoad="initialize()"&
&div id="map_canvas" style="width: 100%; height: 100%;"&&/div&
var point = new BMap.Point(108.896, 34.330);
------&定位地图
new BMap.Point(108..298633)---&点的坐标
map.centerAndZoom(point,13);-----&数字是地图的尺寸
strokeColor:"#f50704",-------&线条颜色
fillColor:"", ------&多边形区域的颜色
下载次数: 190
浏览 17740
浏览: 89710 次
来自: 安徽
竟然没人来评论？？不错的学习源码啊，不过LZ没有给出表格，这有 ...
best_yuan 写道好像运行不了，缺少spring包
没啊 ...
请问Linux下中文乱码，遇到过吗？如何解决？
好像运行不了，缺少spring包
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'js 百度地图 定位到某一中心点
//实例地图
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(lon, lat), 16);
//在地图上定位到某点
map.clearOverlays();
var new_point = new BMap.Point(lon,lat);
var marker = new BMap.Marker(new_point);
// 创建标注
map.addOverlay(marker);
// 将标注添加到地图中
map.panTo(new_point);
//转到该点位置
人气：1505
Copyright (C) , All Rights Reserved.
版权所有 闽ICP备号
processed in 0.043 (s). 13 q(s)}