googlemap 之 javascript实现方法


答案：这是一个很典型的一个background-position-x的应用。技术含量并不高，但是思想还是值得思考的，证明了DHTML方面有很多东西可以变通的。用背景用map，如果做得更复杂一些，用ajax动态的载入图片的背景，也是一个小型的map了。我不打算在此项深究，因为脚本的速度和效率是有瓶颈的。 

预备知识： 
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']这样的数组关系形式。 

问题解决思路： 
这个map的主要难点在于，坐标的准确性，也就是鼠标移动时得到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>  
 <script type="text/javascript">  
 //<![CDATA[  
 /**  
 using javascript implement map drag - neverOnlineMap   
 Power By - never-online, BlueDestiny  
 * Web - http://www.never-online.net  
 * Email - BlueDestiny ### 126.com ### replace @  
 * Permission given to use this script in ANY kind of applications if  
 * header lines are left unchanged.  
 */  
 var neverOnlineMap =  
 {  
 _wrapper: null,  
 _viewer: null,  
 _X: 0,  
 _Y: 0,  
 _width: "100px",  
 _height: "100px",  
 _moved: false,  
 _mapimage: "http://www.blueidea.com/articleimg/2005/04/2499/20050420002401.jpg",  

 init: function(o)  
 {  
 this._wrapper=o.wrapper;  
 this._width=o.width;  
 this._height=o.height;  
 this._X=o.x;  
 this._Y=o.y;  
 this._mapimage=o.map;  
 this._viewer=o.viewer;  
 var x=this._wrapper.style;  
 x.height=this._height; x.width=this._width; x.cursor="move";  
 x.backgroundImage="url("+this._mapimage+")";  
 x.backgroundPositionX=this._X;  
 x.backgroundPositionY=this._Y;  
 x.backgroundRepeat="no-repeat";  
 this._wrapper.onmousedown=this.start;  
 this._wrapper.onmousemove=this.move;  
 this._wrapper.onmouseup=this.end;  
 },  

 start: function(o)  
 {  
 var x=neverOnlineMap._wrapper.style;  
 neverOnlineMap._moved=true;  
 neverOnlineMap._wrapper.X = event.clientX-parseInt(x.backgroundPositionX);  
 neverOnlineMap._wrapper.Y = event.clientY-parseInt(x.backgroundPositionY);  
 neverOnlineMap.view_coordinate({x:x.backgroundPositionX,y:x.backgroundPositionY});  
 },  

 move: function()  
 {  
 if (!neverOnlineMap._moved) return;  
 var x=neverOnlineMap._wrapper.style;  
 x.backgroundPositionX=event.clientX-neverOnlineMap._wrapper.X;  
 x.backgroundPositionY=event.clientY-neverOnlineMap._wrapper.Y;  
 neverOnlineMap.view_coordinate({x:x.backgroundPositionX,y:x.backgroundPositionY});  
 neverOnlineMap._wrapper.setCapture();  
 },  

 end: function()  
 {  
 neverOnlineMap._wrapper.releaseCapture();  
 neverOnlineMap._moved=false;  
 },  

 view_coordinate: function(o)  
 {  
 neverOnlineMap._viewer.innerHTML="坐标 - x:"+o.x+",y:"+o.y;  
 }  
   
 }  
 onload=function foo()  
 {  
 function getElById(idStr) {   
 return document.getElementById(idStr);   
 }   
 neverOnlineMap.init({  
 viewer:getElById("coordinateViewer"),  
 wrapper:getElById("mapwrapper"),  
 x:0,y:0,width:"150px",  
 height:"200px",  
 map:"http://www.blueidea.com/articleimg/2005/04/2499/20050420002604.jpg"  
 })  
 }  
 //]]>  
 </script>  
 <body id="www.never-online.net">  
 <div id="mapwrapper"></div>  
 <div id="coordinateViewer"></div>  
 </body>  
</html>
  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：js技巧--转义符"\"的妙用
下一个：你所要知道JS（DHTML）中的一些技巧
更多图片编程知识: