Baidu Map API Common examples

Source: Internet
Author: User
Tags polyline

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.