function One: Get the viewable area of the Map maps window:var map = new Bmap.map ("Allmap"); Create a Map instance map.centerandzoom (new Bmap.point (116.4035,39.915), 14); When initializing, you can set the center point and map zoom level. var bs = Map.getbounds (); Get the viewable area var BSSW = Bs.getsouthwest (); The lower left corner of the viewable area is var Bsne = Bs.getnortheast (); In the upper right corner of the viewable area, alert ("The current map visual range is:" + bssw.lng + "," + Bssw.lat + "to" + Bsne.lng + "," + Bsne.lat ");
function Two: 3D display map:var map = new Bmap.map ("Allmap", {maptype:bmap_perspective_map}); var point = new Bmap.point (116.4035,39.915); Map.setcurrentcity ("Beijing"); Set the map to show the city this entry is Map.centerandzoom (point,19) that must be set; Map.enablescrollwheelzoom (TRUE);
function Three: Set the size of the map allowed:var map = new Bmap.map ("Allmap", {minzoom:4,maxzoom:8}); Create a Map instance map.centerandzoom (new Bmap.point (116.4035,39.915), 15); When initializing, you can set the center point and map zoom level. Map.enablescrollwheelzoom (TRUE);
function Four: Gets the center point of the current map's field of view:var map = new Bmap.map ("Allmap"); Create a Map instance map.centerandzoom (new Bmap.point (116.4035,39.915), 8); When initializing, you can set the center point and map zoom level. Alert ("Current map Center point:" + map.getcenter (). LNG + "," + map.getcenter (). lat);
function Five: Google map coordinates conversion Baidu map coordinates:Google coordinates var x = 116.32715863448607; var y = 39.990912172420714; var ggpoint = new Bmap.point (x, y); Map initialization var BM = new Bmap.map ("Allmap"); bm.centerandzoom (Ggpoint); bm.addcontrol (new Bmap.navigationcontrol ()); Add Google Marker and Label var markergg = new Bmap.marker (ggpoint); bm.addoverlay (MARKERGG); Add Google Marker var labelgg = new Bmap.label ("I am Google labeled Oh", {offset:new bmap.size (20,-10)}); markergg.setlabel ( LABELGG); Add a callback function after the Google label//coordinate conversion translatecallback = function (point) { var marker = new Bmap.marker (point); Bm.addoverlay (marker); var label = new Bmap.label ("I am Baidu callout Oh", {offset:new bmap.size (20,-10)}); Marker.setlabel (label); Add Baidu Label bm.setcenter (point); alert (point.lng + "," + Point.lat);} settimeout (function () { bmap.convertor.translate (ggpoint,2,translatecallback);//gcj-02 coordinates turn into Baidu coordinates },; function Six: GPS coordinate conversion Baidu coordinates://GPS coordinate var xx = 116.397428; var yy = 39.90923; var gpspoint = new Bmap.point (XX,YY); Map initialization var BM = new Bmap.map ("Allmap"); bm.centerandzoom (Gpspoint); bm.addcontrol (new Bmap.navigationcontrol ()); Add Google Marker and Label var Markergps = new Bmap.marker (gpspoint); bm.addoverlay (MARKERGPS); Add GPS callout var Labelgps = new Bmap.label ("I am GPs callout Oh", {offset:new bmap.size (20,-10)}); markergps.setlabel ( LABELGPS); Add GPS callout//coordinates after the conversion of the callback function translatecallback = function (point) {var marker = new Bmap.marker (point); Bm.addoverlay (marker); var label = new Bmap.label ("I am Baidu callout Oh", {offset:new bmap.size (20,-10)}); Marker.setlabel (label); Add Baidu Label bm.setcenter (point); Alert (point.lng + "," + Point.lat); } settimeout (function () {BMap.Convertor.translate (gpspoint,0, Translatecallback); True latitude and longitude turn into Baidu coordinates},;
function Seven: ranging:var map = new Bmap.map ("Allmap"); Map.centerandzoom ("Chongqing", 12); Initialize the map to set the city and map levels. var pointa = new Bmap.point (106.486654,29.490295); Create point coordinates a--Dadukou District var pointb = new Bmap.point (106.581515,29.615467); Create point coordinates b--Jiangbei District alert (' The distance from Dadukou District to Jiangbei District is: ' +map.getdistance (POINTA,POINTB) + ' M. ‘); Get two point distance var polyline = new Bmap.polyline ([Pointa,pointb], {strokecolor: "Blue", Strokeweight:6, strokeopacity:0.5}); Define Polyline Map.addoverlay (polyline); Add a polyline to the map
function Eight: keyword input prompt entry:function G (ID) { return document.getElementById (ID);} var map = new Bmap.map ("L-map"); Map.centerandzoom ("Beijing", 12); //Initialize the map to set the city and map levels. Create an auto-complete object var ac = new Bmap.autocomplete ( {"input": "Suggestid" &NBSP;, "Location": Map}); Ac.addeventlistener ("Onhighlight", function (e) { //the mouse on the drop-down list of the event var str = ""; var _value = E.fromitem.value;var Value = ""; if (E.fromitem.index >-1) { value = _value.province + & Nbsp;_value.city + _value.district + _value.street + _value.business;} &NBSP;STR = "fromitem<br/>index =" + E.fromitem.index + "<br/>value =" + value; Value = ""; if (E.toitem.index >-1) {_value = e.toitem.value; value = _value.pro Vince + _value.city + _value.district + _value.street + _value.business;} str+= "<br/>toitem<br/>index =" + E.toitem.index + "<br/>value =" + value; G ("Searchresultpanel"). InnerHTML = str;}); var Myvalue;ac.addeventlistener ("Onconfirm", function (e) { //mouse click on the drop-down list after the event var _value = E.item.value; MyValue = _value.province + _value.city + _value.district + _value.street + _value.business; G ("Searchresultpanel"). InnerHTML = "onconfirm<br/>index =" + E.item.index + "<br/>myvalue =" + MYVALUE;SETP Lace ();}); function setplace () { map.clearoverlays (); //Clear all overlays on map function myfun () {& nbsp var pp = Local.getresults (). Getpoi (0). Point; //Get the results of the first smart search Map.centerandzoom (PP, x); Map.addoverlay (New Bmap.marker (PP)); //Add callout } var local = new Bmap.localsearch (map, {//Smart search ONSEARC hcomplete:myfun }); Local.search (myvalue);}
function Nine: Custom copyright controls:var map = new Bmap.map ("Allmap"), Map.centerandzoom (New Bmap.point (116.404, 39.915), one) var cr = new Bmap.copyrightcontro L ({anchor:bmap_anchor_top_right}); Map.addcontrol (CR); Add Copyright control var bs = Map.getbounds (); Cr.addcopyright ({id:1, content: "<a href= ' # ' style= ' Font-size:20px;background: Yellow ' > I am a custom copyright control Yes </a> ", bounds:bs});
function Ten: Custom controls:var map = new Bmap.map ("Allmap"), map.centerandzoom (New Bmap.point (116.404, 39.915), 11); Defines a control class, Function function Zoomcontrol () {//default docking position and offset this.defaultanchor = Bmap_anchor_top_left ; this.defaultoffset = new Bmap.size (ten); }//Inherit from Bmap.control via JavaScript's prototype attribute Zoomcontrol.prototype = new Bmap.control (); The custom control must implement its own initialize method and return//create a DIV element in this method as a container for the control and add it to the map container ZoomControl.prototype.initialize = function (map) {//Create a DOM element var div = document.createelement ("div"); Add text description div.appendchild (document.createTextNode ("Zoom Level 2")); Set style div.style.cursor = "pointer"; div.style.border = "1px solid gray"; Div.style.backgroundColor = "White"; Bind event, click once to enlarge level two div.onclick = function (e) {map.setzoom (Map.getzoom () + 2);}//Add DOM element to map Map.getcontainer (). appendchild (Div); Returns the DOM element to the return div; }//Create control var Myzoomctrl = newZoomcontrol (); Add to map map.addcontrol (Myzoomctrl);
Baidu Map API Common examples
