Home > Developer > JavaScript
Examples of map grid implementation using Baidu map and Baidu map grid
Preface:Recently, Baidu map is used to implement the project visualization function. Therefore, the most basic function is to gridded the map and divide the projects in different regions;
1. I went to the open platform of Baidu map to apply for the key. Here I posted my key. ak = A3CklGvnFOjkAzKzay2dySgfdig0GKz4
2. Create a simple page. I will paste my page below.
<!DOCTYPE html>3, which introduced the ziroom-map.js, this is the name of our company, I paste the code out, this js is encapsulated Baidu js api, if someone wants to ask why encapsulation, can it be used directly? Then my answer is: encapsulation can combine specific businesses with maps to make the code clearer and persist the current map state, facilitating map operations.
Var ZMap = function (id, center, level) {this. initCenter = new ZPoint (116.404, 39.915); // initialize the center point, and to define the center point of the grid this. id = id; // div id this. level = level? Level: 13; // map level this. center = center? Center: this. initCenter; // center this. map = null; // Baidu map instance this. xgrids = []; // this. ygrids = []; // weft this. beSelectBounds ={}; this. bounds = null; // The four vertices of the current map this. span = null; // the span of the current grid. this. init ();} ZMap. prototype = {init: function () {// global initialization var zMap = this; this. map = new BMap. map (this. id); this. map. centerAndZoom (this. center. point, this. level); this. map. enableScrollWheelZoom (); this. map. disableInertialDragging (); this. map. addControl (new BMap. navigationControl ({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}); // The zoom button this. map. addControl (new BMap. scaleControl ({anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap. size (80, 25)}); // scale this. map. disableDoubleClickZoom (); this. map. setMapStyle ({style: 'googlelite '}); this. initProperty (); this. initGrid (); // click the event after adding a move this. map. addEventListener ("dragend", function () {zMap. initProperty (); zMap. initGrid () ;}); // Add the event this. map. addEventListener ("zoomend", function () {zMap. initProperty (); zMap. initGrid () ;}); // sets the click event this. map. addEventListener ("click", function (e) {var point = e. point; // obtain the block in which the current vertex is located and obtain the four vertices of the square var points = zMap. getGrid (point); // determines whether the current region has been selected. if selected, deselect var key = ''+ points [0]. lng + points [0]. lat + points [2]. lng + points [2]. lat; // use the coordinates of two points as the key if (zMap. beSelectBounds [key]) {zMap. map. removeOverlay (zMap. beSelectBounds [key]); delete zMap. beSelectBounds [key]; return;} var polygon = new BMap. polygon (points, {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5}); zMap. map. addOverlay (polygon); zMap. beSelectBounds [key] = polygon;}) ;}, initProperty: function () {// initialize the current map status this. level = this. map. getZoom (); this. bounds = {x1: this. map. getBounds (). getSouthWest (). lng, y1: this. map. getBounds (). getSouthWest (). lat, x2: this. map. getBounds (). getNorthEast (). lng, y2: this. map. getBounds (). getNorthEast (). lat}; this. span = this. getSpan (); // level Attribute required}, initGrid: function () {// initialize the grid var zMap = this; // remove the original gridlines first for (var I in zMap. xgrids) {this. map. removeOverlay (zMap. xgrids [I]);} zMap. xgrids = []; for (var I in zMap. ygrids) {this. map. removeOverlay (zMap. ygrids [I]);} zMap. ygrids = []; // obtain the current grid span var span = zMap. span; // initialize the grid on the map for (var I = zMap. bounds. x1 + (zMap. initCenter. point. lng-zMap. bounds. x1) % span. x-span. x; I <zMap. bounds. x2 + span. x; I + = span. x) {var polyline = new BMap. polyline ([new BMap. point (I. toFixed (6), zMap. bounds. y1), new BMap. point (I. toFixed (6), zMap. bounds. y2)], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5}); zMap. xgrids. push (polyline); zMap. map. addOverlay (polyline);} for (var I = zMap. bounds. y1 + (zMap. initCenter. point. lat-zMap. bounds. y1) % span. y-span. y; I <zMap. bounds. y2 + span. y; I + = span. y) {var polyline = new BMap. polyline ([new BMap. point (zMap. bounds. x1, I. toFixed (6), new BMap. point (zMap. bounds. x2, I. toFixed (6)], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5}); zMap. ygrids. push (polyline); zMap. map. addOverlay (polyline) ;}, getSpan: function () {// obtain the Grid span var scale = 0.75; var x = 0.00064; for (var I = this. level; I <19; I ++) {x * = 2;} var y = parseFloat (scale * x ). toFixed (5); return {x: x, y: y };}, getGrid: function (point) {// returns the four vertices var zMap = this at the current point in the vertex block. // first, find the two ordinate coordinates var xpoints = this. xgrids. map (function (polyline) {return polyline. getPath () [0]. lng ;}). filter (function (lng) {return Math. abs (lng-point. lng) <= zMap. span. x ;}). sort (function (a, B) {return a-B ;}). slice (0, 2); // find the coordinates of the two crossbars var ypoints = this. ygrids. map (function (polyline) {return polyline. getPath () [0]. lat ;}). filter (function (lat) {return Math. abs (lat-point. lat) <= zMap. span. y ;}). sort (function (a, B) {return a-B ;}). slice (0, 2); return [new BMap. point (xpoints [0], ypoints [0]), new BMap. point (xpoints [0], ypoints [1]), new BMap. point (xpoints [1], ypoints [1]), new BMap. point (xpoints [1], ypoints [0])] ;}, reset: function () {// reset this. map. reset () ;}} var ZPoint = function (x, y, code) {this. code = code; this. point = new BMap. point (x, y );}Conclusion: This article is so much better. You are welcome to correct it.
The above example of using Baidu map to implement map grid is all the content that I have shared with you. I hope to give you a reference and support for the customer's house.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
