googlemap 之 javascript實現方法

來源:互聯網
上載者:User

這是一個很典型的一個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"?> xmlns="http://www.w3.org/1999/xhtml">


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.