一步一步開發電商平台 地區廣告實現

標籤：

技術需求描述：

（1）以北京市為例，以北京市中心點座標為原點，建立類表格覆蓋物，表格代表的寬高均代表一公裡。每一塊儲存格都有自己的編號。

• 格式 html+js 地圖為百度地圖
• 相容性 ie6+ 以及其他主流瀏覽器支援
• 以市中心座標點為中心區塊的中心點
• 以數學的x，y軸座標系，作為區塊編號命名的依據
• 每一個區塊都是一個正方形，寬高都是一公裡
• 地圖及上面的表格覆蓋物能放大縮小
• 遮罩層的每個方塊都可以點擊，點擊後方塊變深色，再次點擊恢複原色，並可以記錄點擊的那個區塊。
• 能以字串或數組，初始化覆蓋物表格中的已選中區塊
• 能將地圖中心點定位到某一點（百度地圖支援），相關的覆蓋物對應顯示
• 能根據配置，設定覆蓋物的大小（n*m個方塊）和每一個區塊的大小（之前提到的寬高1公裡可設定）

 

（2）       相應的JavaScript  API

?       ClearAllArea() 作用清空所有以選中的區塊

?       ClickArea() 點擊區塊後執行的函數

?       InitArea（str，bool）初始化地區

參數說明：str 字串，格式為01_12,23_11 已選中的區塊

                  Bool bool類型，true或false ，true 代表初始化的區塊可再次點擊編輯，false 代表初始化的區塊不可編輯（區塊顏色區分正常其他顏色）。

 /* 這塊本來想外包出去，當時主要忙於支付模組的開發，沒人接，最後還是自己搞。

 

技術實現：

利用百度地圖API中的自訂覆蓋物實現

單個自訂的覆蓋物可以滿足一個區塊的所有功能，對於那麼多區塊怎麼辦，迴圈產生多個區塊讓他們一個挨著一個。功能就實現了。

（這塊有一個效能問題，因為每一個區塊都是一個對象，都要消耗記憶體和計算資源，這樣會使瀏覽器佔用大量記憶體，還有每次對地圖的縮放都會使這些區塊全部重繪。所以區塊的數量要進行限制。900個區塊（30*30）的時候瀏覽器就很卡了）

// 定義自訂覆蓋物的建構函式 function SquareOverlay(x,y,center,color,eve){this._latPer=0.008998;this._lngPer=0.011711; this._name=x+"_"+y;  this._x=x;//x座標索引 this._y=y; //y座標索引 this._center = center;    this._length = length;    this._color = color;    this._minLng = center.lng - this._lngPer / 2+ x * this._lngPer; this._maxLng = center.lng + this._lngPer / 2+ x * this._lngPer; this._minLat = center.lat - this._latPer / 2+ y * this._latPer; this._maxLat = center.lat + this._latPer / 2+ y * this._latPer;}// 繼承API的BMap.Overlay   SquareOverlay.prototype = new BMap.Overlay();// 實現初始化方法SquareOverlay.prototype.initialize = function (map) {    // 儲存map對象執行個體      this._map = map;    // 建立div元素，作為自訂覆蓋物的容器      var div = document.createElement("div");    div.name = this._name;    div.style.position = "absolute";     var maxPixel = map.pointToOverlayPixel(new BMap.Point(this._maxLng, this._maxLat));    var minPixel = map.pointToOverlayPixel(new BMap.Point(this._minLng, this._minLat));    div.style.width = Math.abs(maxPixel.x - minPixel.x) + "px";    div.style.height = div.style.width;    //Math.abs(maxPixel.y-minPixel.y) + "px";    div.style.backgroundColor = this._color; //填充顏色    div.style.filter = "alpha(opacity=55)"; //透明度相容ie8    div.style.opacity = 0.55;  //透明度    div.style.border = "1px solid #6390ff"; //設定邊框和 邊框顏色    div.onclick = AreaClick;    // 將div添加到覆蓋物容器中     map.getPanes().floatPane.appendChild(div);    // 儲存div執行個體      this._div = div;    // 需要將div元素作為方法的傳回值，當調用該覆蓋物的show、      // hide方法，或者對覆蓋物進行移除時，API都將操作此元素。      return div;}// 實現繪製方法  SquareOverlay.prototype.draw = function(){   // 根據地理座標轉換為像素座標，並設定給容器    var leftposition= this._map.pointToOverlayPixel(new BMap.Point(this._minLng,this._maxLat)); var maxPixel=this._map.pointToOverlayPixel(new BMap.Point(this._maxLng,this._maxLat)); var minPixel=this._map.pointToOverlayPixel(new BMap.Point(this._minLng,this._minLat)); this._div.style.left = leftposition.x  + "px";    this._div.style.top = leftposition.y + "px";    this._div.style.width =Math.abs(maxPixel.x-minPixel.x) + "px"; this._div.style.height =Math.abs(maxPixel.y-minPixel.y) + "px";}

/* 實現中點擊事件的綁定 剛開始 使用 傳方法名，然後動態調用。但有問題，單獨觸發事件時 沒問題，放在for迴圈中 就有問題，最後改為固定的方法名。　　

 

一步一步開發電商平台 地區廣告實現