Sencha Touch Baidu Map Extension

The extension code is as follows:

Ext.define (' UX. BMap ', {alternateclassname: ' BMap ', Extend: ' Ext.container ', xtype: ' BMap ', requires: [' Ext.util.Geolocation ' ], config: {///private variable, map object Map:null,///<summary>//Map initialization configuration///</summary >//<param name= "Locate" > whether to load positioning controls </param> mapoptions: {},//Initial configuration//center point, can be city name        Said, can also be {LNG: ', LAT: '} format coordinate data center: ' Beijing ',//whether to listen for punctuation Click event Markertap:false,//private variable, positioning button        Locate:null,//private variable, positioning control Geo:null,//Note that populating the data requires that the Showmap event is triggered before the data source can be//store Lng,lat the two fields must have Store:null,//data data source, format [{LNG: ', Lat: '}] data:null,//Baidu service key, no words will not coordinate conversion, positioning will have a certain error reference/HTTP/        developer.baidu.com/map/changeposition.htm ak:null,//LNG coordinates name Lngname: ' LNG ',//lat coordinates name        Latname: ' lat ',//Local search keyword Key:null,//The coordinates can be resolved directly according to the address, either as a single address, or as an array of [{address: '}], which can have additional parameters Address NULL},//Initialize Initialize:function () {var me = this;        Me.callparent ();    After the view is drawn, load Baidu map to avoid the map loading error Me.on ({painted: ' Initmap ', scope:me});        },//Initialize map initmap:function () {var me = this, map = Me.getmap ();            if (!MAP) {//Initialize map//Get Map initialization configuration var mapoptions = Me.getmapoptions (),//Get center Point  Center = me.getcenter (),//Get search Key key = Me.getkey (),//Get address            = Me.getaddress (),//Get Data source Store=me.getstore (), point;            Create map = new Bmap.map (me.element.dom);            Gets the center point if (ext.isstring (center)) {dot = center;            } else if (Ext.isobject (center)) {point = Bmap.point (CENTER.LNG, Center.lat);            }//Set center point and map display level map.centerandzoom (points, 11);  Add a Map Zoom control          Map.addcontrol (New Bmap.zoomcontrol ()); Determines whether the anchor control is loaded if (mapoptions.locate) {//Loads the positioning control Map.addcontrol (Me.getlocatecontrol            ());            }//Set the map object to make it easy to get to the Map object Me.setmap (map) elsewhere;            Keyword search if (key) {Me.search (key);            }//Address resolution if {me.setmarkerbyaddress;            }//Load Store if (Store&&store.getcount ()) {me.onload (store);        }//Map loading complete Trigger event me.fireevent (' Showmap ', ME);  }},//Data source event Storeeventhooks: {load: ' onLoad '},//Fill data updatedata:function {var        me = this, store = Me.getstore ();  if (!store) {Me.setstore (ext.create (' Ext.data.Store ', {data:data, Autodestroy:        true})); } else {store.Add (data); }},//Create store applystore:function (store) {var me = this, bindevents = Ext.apply ({}, ME.S        Toreeventhooks, {scope:me});            Get store, bind event if (store) {store = Ext.data.StoreManager.lookup (store);        Store.onafter (bindevents);    } return store; },//Update store updatestore:function (Newstore, oldstore) {var me = this, map = Me.getmap (), Bin        Devents = Ext.apply ({}, Me.storeeventhooks, {scope:me}); Remove the Bind event and destroy if (Oldstore && ext.isobject (oldstore) && oldstore.isstore) {oldstore.un (bi            ndevents);            if (Oldstore.getautodestroy ()) {Oldstore.destroy ();        }} if (Map && newstore.getcount ()) {me.onload (Newstore);  }},//Data load succeeded, load coordinate point onload:function (store) {var me = this, map = Me.getmap (),      Lngname = Me.getlngname (), latname = Me.getlatname (), marker, item;        Map.clearoverlays ();            Store.each (function (record, index, length) {item = Record.getdata ();        Me.addpoint (Item[lngname], item[latname], item, me, map);    });        },//Add single point addpoint:function (LNG, LAT, item,me, map) {if (!me) {me = this;        } if (!map) {map = Me.getmap ();            } if (LNG && LAT) {//create label var marker = new Bmap.marker (new Bmap.point (LNG, LAT));            Other data marker.options = {};            Add other data from the model to the button for (var name in item) {Marker.options[name] = Item[name];                } if (Me.getmarkertap ()) {//Add Click to listen Marker.addeventlistener ("click",               function (type, target) {me.fireaction (' Tapmarker ', [me, this], ' ontapmarker '); });        }//Add annotations to the map map.addoverlay (marker);        }},//Get position Control getlocatecontrol:function () {//create control var Locatecontrol = new Bmap.control ();        Set azimuth Locatecontrol.defaultanchor = Bmap_anchor_bottom_left;        Set coordinates locatecontrol.defaultoffset = new Bmap.size (10, 70);            Set Dom locatecontrol.initialize = function (map) {var zoom = document.createelement ("div");            Zoom.classname = ' Bmap_zoomctrl zoom_btn locatecontrol ';            var location = document.createelement ("div");            Location.classname = ' location ';            Zoom.appendchild (location);            Map.getcontainer (). appendchild (zoom);        return zoom;            }//Monitor Click event This.element.on ({tap: ' Onlocate ', delegate: ' Div.locatecontrol ',        Scope:this});    return Locatecontrol; },//Click the position button Onlocate:function (e) {var el = E.getTarget (' div.location ', NULL, true);        El.addcls (' locationgif ');        This.setlocate (EL);    Trigger Location Event This.setgeo (TRUE);    },//Create the location plugin applygeo:function (config) {return ext.factory (config, Ext.util.Geolocation, This.getgeo ());             },//Update locator plugin updategeo:function (Newgeo, Oldgeo) {var events = {locationupdate: ' ongeoupdate ',        Locationerror: ' Ongeoerror ', scope:this};        if (Oldgeo) {oldgeo.un (events);            } if (Newgeo) {Newgeo.on (events);        Newgeo.updatelocation ();        }},//Locate successfully, set Center point ongeoupdate:function (GEO) {var me = this, AK = Me.getak (); if (AK) {Ext.Ajax.request ({url: ' http://api.map.baidu.com/geoconv/v1/? ', params                : {coords:geo.getLongitude () + ', ' + geo.getlatitude (), Ak:ak},         Scope:me,       Success:function (data) {data = Ext.decode (Data.responsetext). Result[0];                    if (data) {Me.addmypoint (data.x, DATA.Y);        }                }            });        } else {Me.addmypoint (Geo.getlongitude (), Geo.getlatitude ());  }},//add my coordinates addmypoint:function (LNG, lat) {var me = this, map = Me.getmap (), Icon = new        Bmap.icon ("Resources/icons/markers.png", new Bmap.size (+), {imageoffset:new bmap.size (0, 0)}),        Point = new Bmap.point (LNG, lat), marker = new Bmap.marker (point, {icon:icon});        Add a callout to the map map.addoverlay (marker);        Map.setcenter (point);    Me.unlocate ();        },//Location failed Ongeoerror:function () {this.unlocate ();    Trigger Event This.fireevent (' Geoerror ', this);     },//de-position animation unlocate:function () {var locate = this.getlocate ();   if (locate) {locate.removecls (' locationgif ');        }},//Update search keyword updatekey:function (value) {var me = this, map = Me.getmap ();        if (map && value) {Me.search (value); }},///<summary>///</summary>//<param name= "key" > Keywords: string| array<string></param>//<param name= "Unclear" > does not clear cover </param> search:function (Key, Uncl        Ear) {var map = This.getmap ();!unclear && map.clearoverlays (); var local = new Bmap.localsearch (map, {renderoptions: {map:map, Autoviewport:        true});            Local.setsearchcompletecallback (function (bo) {Console.log (bo); if (Bo._currentnumpois = = 0) {ext.toast (' Please enter the correct search criteria!            ‘);        }        });    Local.search (key); },///<summary>///based on the center point and the search term to launch the peripheral search//</summary>   <param name= "key" > Keywords: string| array<string></param>//<param name= "by" > Center point: localresultpoi| String|  point</param>//<param name= "Unclear" > does not clear cover </param> searchnearby:function (key, by, unclear)        {var map = This.getmap ();!unclear && map.clearoverlays (); var local = new Bmap.localsearch (map, {renderoptions: {map:map, Autoviewport:        true});    Local.searchnearby (key, by); },///<summary>//Set up Map Center///</summary>//<param name= "point" ></param> SETMAPC        Enter:function (LNG, LAT) {var map = This.getmap ();        if (map) {Map.setcenter (new Bmap.point (LNG, LAT));        }},//update address setmarkerbyaddress:function {var me = this;        if (address) {if (Ext.isarray (address)) {for (var i = 0; i < address.length; i++) {            Me.getmarkerbyaddress (Address[i].address, address[i]);            }} and else if (ext.isstring (address)) {me.getmarkerbyaddress (address); }}},//resolve coordinates according to address getmarkerbyaddress:function (addr, params) {var me = this, AK = me.ge        TAk (); if (AK) {Ext.Ajax.request ({url: ' http://api.map.baidu.com/geocoder/v2/? ', Mypar Ams:params, params: {address:address, Ak:ak, O  Utput: ' JSON '}, Scope:me, Success:function (data) {var                    Response = Ext.decode (data.responsetext), location;                        if (Response.Status = = 0) {location = Response.result.location;                    Me.addpoint (LOCATION.LNG, location.lat,data.request.options.myparams);         } else {               if (!params) {ext.toast (' Please enter the correct search criteria!                        ‘);        }                    }                }            }); } else {Ext.Logger.error (' Please set up Baidu service ak!        ‘); }    }});

Basic usage:

1. Introduction of Baidu map JavaScript fast version

http://api.map.baidu.com/api?type=quick&ak=Y5wTAbhgC4EDVgaBnzCUYO9l&v=1.0

2. Use in view, usage similar to the official Google Maps control

Ext.define (' App.view.Map ', {    alternateclassname: ' Map ',    extend: ' UX. BMap ',    xtype: ' map ',    config: {        title: ' Map ',///<summary>//        Map Configuration        ///</summary >        //<param name= "Locate" > whether to load positioning controls </param>        mapoptions: {            locate:true        },        Data: [{LNG: ' 116.404 ', lat: ' 39.915 ', Name: ' Tian ' anmen '}, {lng: ' 116.1 ', lat: ' 39.915 ', Name: ' The ' Gate '}],        //whether to listen for punctuation click events 
   markertap:true    },    //Click coordinate processing    ontapmarker:function (me, marker) {        //Create Information window        var Infowindow = new Bmap.infowindow (marker.options.name);        Marker.openinfowindow (Infowindow);    }});

：

Sencha Touch Baidu Map Extension