One step-by-step development of e-commerce platform regional advertising implementation

Technical Requirements Description:

(1) Taking Beijing as an example, the center point coordinates are the origin, creating the class table covering, the table represents the width of the height of a kilometer. Each cell has its own number.

• Format HTML+JS map for Baidu Map
• Compatibility ie6+ and other mainstream browser support
• Center Point of Center block with city center coordinate point
• Based on the mathematical x, y axis coordinate system, as the block number name
• Each chunk is a square, and the width is one kilometer.
• The map and the above table overlays can be scaled down
• Each block of the mask layer can be clicked, click the rear block to darken, click again to restore the primary color, and record the clicked block.
• Ability to initialize selected chunks in the overlay table as a string or an array
• Can locate the center point of the map to a point (Baidu Map Support), the relevant overlay corresponding display
• Can be configured to set the size of the overlay (n*m blocks) and the size of each chunk (previously mentioned width height 1 km can be set)

(2) The corresponding JavaScript API

? Clearallarea () function clears all the selected chunks

? Clickarea () functions executed after clicking a chunk

? Initarea (str,bool) initialization area

Parameter description: STR string, formatted as 01_12,23_11 selected chunk

bool bool type, TRUE or false, true means that the initialized chunk can be clicked again to edit, false means that the initialized chunk is not editable (the chunk color distinguishes normal other colors).

/* This piece originally wanted to outsource, was mainly busy with the development of the payment module, no one to answer, and finally to do their own.

Technical implementation:

Use the custom overlay in the Baidu map API to implement

A single custom overlay can satisfy all the functions of a block, and for so many chunks, loops produce multiple chunks to make them one next to each other. function is realized.

(This block has a performance problem because each chunk is an object that consumes both memory and compute resources, which makes the browser consume a lot of memory, and each time the map is scaled, the chunks are redrawn.) So the number of blocks to be limited. 900 blocks (30*30) when the browser is very stuck)

Defines a constructor function Squareoverlay (x,y,center,color,eve) {this._latper=0.008998;this._lngper=0.011711; this._ for a custom overlay;  name=x+ "_" +y; this._x=x;//x coordinate index this._y=y;    Y-coordinate index 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;} Inherit API Bmap.overlay Squareoverlay.prototype = new Bmap.overlay ();//Implement initialization method SquareOverlay.prototype.initialize =    function (map) {//Save Map Object instance This._map = map;    Create DIV element as a container for custom overlays 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; Fill Color div.style.filter = "alpha (opacity=55)";  Transparency compatible IE8 div.style.opacity = 0.55; Transparency Div.style.border = "1px solid #6390ff";    Set border and border color Div.onclick = Areaclick;    Add div to the overlay container map.getpanes (). Floatpane.appendchild (Div);    Save div instance this._div = div;      The div element needs to be the return value of the method, and the API will manipulate this element when the show,//Hide method for the overlay is called, or the overlay is removed. return div;} The implementation drawing Method SquareOverlay.prototype.draw = function () {//is converted to pixel coordinates according to geographical coordinates and set to the container var leftposition= this._map.pointtoover Laypixel (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";}

/* The binding of the Click event in the implementation is just beginning with the method name and then dynamically invoked. However, there is a problem, there is no problem when triggering the event individually, there is a problem in the For loop, and finally the fixed method name is changed.

One step-by-step development of e-commerce platform regional advertising implementation