基于CSS背景定位与JavaScript实现简易地图交互

基于CSS背景定位与JavaScript实现简易地图交互

这是一个典型的background-position-x应用场景。虽然技术难度不高，但其设计思路值得借鉴，证明了DHTML领域存在诸多变通空间。若进一步复杂化，通过Ajax动态加载图片背景，即可构建出一个小型地图系统。此处不再深入探讨，主要受限于脚本执行速度与效率的瓶颈。

预备知识

预备知识：

background-position-x，即背景图像的X轴坐标。

background-position-y，即背景图像的Y轴坐标。

event.clientX，代表鼠标当前的X轴坐标。

event.clientY，代表鼠标当前的Y轴坐标。

JSON，自Ajax in Action出版后广受欢迎。从广义角度看，它相当于JavaScript中的关联数组。JSON（JavaScript Object Notation）的结构类似于：var o={name:"never-online",web:"http://www.never-online.net",blog:"http://blog.never-online.net"}。通过o.name、o.web或o['name']、o['web']等形式即可访问其属性。

问题解决思路

问题解决思路：

该地图实现的核心难点在于坐标计算的准确性，具体而言是如何在鼠标移动时正确获取background-position的坐标方向。

若能解决上述坐标计算问题，则任务已完成大半。

采用常规处理方法：

最终坐标 = 鼠标移动后的坐标 - 预先存储的原始坐标。

原始坐标的计算方法为：neverOnlineMap._wrapper.X = event.clientX-parseInt(x.backgroundPositionX);

即使用鼠标当前所在位置减去图像背景的X坐标。

图片背景坐标 = 鼠标位置 - 原始位置。

Y坐标的计算逻辑与X坐标类似，此处不再赘述。公式为：neverOnlineMap._wrapper.Y = event.clientY-parseInt(x.backgroundPositionY);

源码实现

源码如下：

 <?xml version="1.0" encoding="UTF-8"?>   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <title> neverOnlineMap - http://www.never-online.net </title>   <meta http-equiv="ImageToolbar" content="no" />   <meta name="author" content="never-online, BlueDestiny"/>   <meta name="keywords" content="never modules, Mozilla CSS, C#, .net, Refercence, BlueDestiny, never-online"/>   <meta name="description" content="BlueDestiny, never-online"/>   <meta name="title" content=" - http://www.never-online.net" />   <meta name="creator.name" content="KaiyuanLau, never-online, BlueDestiny" />   <style type="text/css" media="all" title="Default">   </style>      <body id="www.never-online.net">   <div id="mapwrapper"></div>   <div id="coordinateViewer"></div>   </body>  </html>