Call Baidu Map API implementation of the view map function of the small plug-in

1. function

Bmap.js can be called according to geographical location Baidu map, the use of pop-up box form

2. Usage

var city = ' Qingdao '; var address = ' Hong Kong Middle Road '; Bmap.init ({city:city,address:address});

3. Reliance

Self-introduction of jquery and Layer.js (popup box plugin)

4. Limitations

The coupling between the modules is too tight, the degree of plug-in is too low, the dependence is too strong

5. Demo download

Address: Http://pan.baidu.com/s/1pJAxOnT

6. SOURCE Preview

;! (function (window) {Window.bmap = {//default configuration config: {width: ' 700px ', Height: ' 500px ', City: ' Beijing ', Address: ' Tiananmen Square ', Scalecontro L:true,bmapapiurl: ' http://api.map.baidu.com/api?v=2.0&ak=C474e91657d303114af6e8df1931a392 ', Bmapgeocoderurl : ' Http://api.map.baidu.com/geocoder/v2/?ak=C474e91657d303114af6e8df1931a392&output=json '},//transit method, Asynchronous load load Baidu Api,initvariable:function () {if (!window. BMAP) {this.loadscript (bmap.config.bmapapiurl+ ' &callback=bmap.openmap ');} Else{this.openmap ();}},//load scriptloadscript:function (URL) {var script = document.createelement (' script '); Script.setattribute (' type ', ' text/javascript '); Script.setattribute (' src ', url);d ocument.body.appendChild (script) ;},//Generate Map Container createmapcontainer:function () {var mapcontainer = document.createelement (' div '); Mapcontainer.setattribute (' id ', ' mapcontainer '); mapContainer.style.width = This.config.width; MapContainer.style.height = This.config.height;document.body.appendchild (Mapcontainer); return mapcontainer;},// Determine the coordinate position and go to initialize Bmapopenmap : function () {$.getjson (bmap.config.bmapgeocoderurl+ "&address=" +bmap.config.address+ "&city=" + bmap.config.city+ "&callback=", function (data) {if (data && data.status==0) {bmap.createbmap && BM Ap.createbmap (Data.result);} Else{layer.msg (data.msg?data.msg: ' request failed! ');}});},//ingress Method Init:function (setings) {this.config = $.extend ({}, Bmap.config, setings); this.initvariable ();},//pop-up mask layer showlayer:function (domobj) {var mylayer = $.layer ({type:1,title: FALSE,CLOSEBTN: [0, True],border: [7, 0.1, ' #222 ', True],shade: [0.5, ' #222 ', true],offset: [' 30px ', ' 50% '],//move: [ '. Juanmove ', False],area: [This.config.width, ' Auto '],page: {dom:domobj},close:function () {layer.close (Mylayer); Domobj.remove ();//Remove DOM node, otherwise multiple calls will cause map display exception}});},//call Baidu Map Apicreatebmap:function (initobj) {var mapcontainer = document.getElementById (' Mapcontainer '); if (!mapcontainer) {Mapcontainer = This.createmapcontainer ();}    var map = new Bmap.map (Mapcontainer); Create a Map instance Map.addcontrol (new bmap.maptYpecontrol ()); Map Type component Map.addcontrol (new Bmap.navigationcontrol ()); if (This.config.scaleControl) {Map.addcontrol (New Bmap.scalecontrol ());}  Map.addcontrol (New Bmap.overviewmapcontrol ()); Map.enablescrollwheelzoom ();//scale var point = new Bmap.point (Initobj.location.lng,initobj.location.lat);//  Initialize the positioning map.centerandzoom (point, 16);  Initialize the map, set the center point coordinates and map level map.clearoverlays (), var marker = new Bmap.marker (points); Create a callout for the latitude and longitude Map.addoverlay (marker) for the address to be queried; This.showlayer (Mapcontainer);}}) (window)

　　

Call Baidu Map API implementation of the view map function of the small plug-in