googlemap 之 javascript實現方法

2019-11-21 02:22:06

字體：大中小

來源：轉載

供稿：網友

這是一個很典型的一個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="http://www.survivalescaperooms.com/"/>   <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   class="iwvjtn8m0"   id="mapwrapper"></div>   <div   class="iwvjtn8m0"   id="coordinateViewer"></div>   </body>  </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：Javascript-Mozilla和IE中的一個函數直接量的問題

下一篇：腳本中出現 window.open() access is denied - 拒絕訪問情況一則及分析