Baidu Map API Custom Map

First, the use of the instructions JavaScript API v1.4 and the previous version does not need to request a key (AK), since the v1.5 version of the request for a key (AK) before it can be used. Only the JavaScript API V2.0 version supports HTTPS, and other JavaScript API versions are not supported. Mobile-side references need to add meta tags <meta name= "viewport" content= "initial-scale=1.0, User-scalable=no"/> (note here: The value in the META tag cannot be changed , some mobile writing may change the value of the META tag will cause the mobile map font is particularly small problem). In the use of Baidu map JavaScript API service, you need to use Baidu BD09 coordinates, such as using other coordinates (WGS84, GCJ02) to display, you need to convert other coordinates to BD09.

Second, Baidu Map use

In HTML

<div style= "width:100%;height:550px;" id= "map" ></div>      //must have width and height to display the map

1, quoting Baidu map API file

http://api.map.baidu.com/api?v=1.4//Parameter v indicates the version of the API you are loading, using JavaScript APIv1.4 and previous versions to refer to in this way. Http://api.map.baidu.com/api?v=2.0&ak= your key  //use JavaScript APIv2.0 Please first request the key AK, which is quoted in this way.

2. Create a Map instance

New BMap. map("map"); The//bmap namespace maps class, which allows you to create a map instance with the new operator, which can be an element ID or an element object    

3 . Create Point coordinates

New BMap. Point (116.40439.915);//create a coordinate points with the Dot class under the Bmap namespace     

4. Map initialization

Map. centerandzoom(point); the//bmap.map.centerandzoom () method requires that you set the center and map levels. The map must be initialized before other operations can be performed. 

Above this can achieve a simple call of Baidu map

5. Changes in map status

Map. Panto(new BMap.  Point (116.40939.918)); the//panto () method will let the map move smoothly to the new center, and if the moving distance exceeds the current map area size, The map jumps straight to that point. 

6. Add Control Configuration

Map.enablescrollwheelzoom (TRUE); Enable wheel zoom in and zoom out
Add a zoom control to a map
var ctrlnav = new window. Bmap.navigationcontrol ({
    Anchor:bmap_anchor_top_left,
    Type:bmap_navigation_control_large
});
Map.addcontrol (Ctrlnav);
Add a thumbnail control to your map
var ctrlove = new window. Bmap.overviewmapcontrol ({
    Anchor:bmap_anchor_bottom_right,
    Isopen:1
});
Map.addcontrol (Ctrlove);
Add a scale bar control to a map
var Ctrlsca = new window. Bmap.scalecontrol ({
    Anchor:bmap_anchor_bottom_left
});
Map.addcontrol (CTRLSCA);
Map marker Click event; info is an array of information, index is an array of information
Map.clickelen = function (Elem,info,index) {
    Elem.openinfowindow (Info[index]);
};

Map.addcontrol (New Bmap.navigationcontrol ());    Add a Pan zoom control
Map.addcontrol (New Bmap.scalecontrol ());     Add a scale bar control
Map.addcontrol (New Bmap.overviewmapcontrol ()); Add a thumbnail control

7. Modify the control style

var opts = {type: BMAP_ Navigation_control_small}//Modify the Panning control style map. addcontrol (new bmap. Navigationcontrol   

{offsetnew BMap.  Size(5)}//Modify the offset position map of the scale bar.  AddControl(new BMap.  Scalecontrol(opts))             

8, determine whether to support H5 browser positioning

function Map_init () {
Determine if the H5 browser is supported to position start
map= new Bmap.map ("Map");
if (navigator.geolocation) {
Window.navigator.geolocation.getCurrentPosition (function (position) {
Ios10
var geolocation = new Bmap.geolocation ();
Geolocation.getcurrentposition (function (position) {
lat = Position.point.lat;
LNG = POSITION.POINT.LNG;
Mapgps (lat,lng,10); Gets the function executed after successful positioning
},function (Error) {
Alert ("ErrorCode: +error.code+", errormessage: "+error.message");
Console.log ("ErrorCode:" +error.code+ ", ErrorMessage:" +error.message);
});
IOS10 End
}, function (Error) {
Oalert ("GPS signal is not stable, can not be accurately located");
function Thelocation (cityname) {//eradicate city name location
var city = CityName;
if (City! = "") {
Map.centerandzoom (cityname,11); Set Map center point with city name
}
}
function Myfun (Result) {
var cityname = Result.name;
Get City name CityName
Thelocation (CityName);
}
var mycity = new Bmap.localcity ();
Mycity.get (Myfun);
});
}else{
Alert ("Unable to get current position");
}
Determine if H5 browser is supported to locate end
}

9. Add multiple labeling points dynamically and click the callout point pop-up message box

var point = new Array (); Array that holds the latitude and longitude information of the callout point
var marker = new Array (); Array that holds the callout point object
var info = new Array (); Array that holds the Cue Information window object
The data collection to which Var markerarr;//gets
var markerarrlen;//the length of the data passed over the background

Call map
function Mapall (Markerarr,markerarrlen,point,marker,info,markman) {
for (var i = 0; i < markerarr.length; i++) {
var p0 = markerarr[i].lng; //
var p1 = Markerarr[i].lat; The latitude and longitude of the map point coordinates are presented separately according to the dot format of the original array.
var me_point = new window. Bmap.point (P0, p1); Cycle through the generation of new map points
Convert GPS coordinates to Baidu coordinates
markman++;
var me_point2 = new window. Bmap.point (P0, p1); Cycle through the generation of new map points
var imgurl = "${context}/resources/cellar/images/map_me2.png";
var Myicon = new Bmap.icon (Imgurl, New Bmap.size (18,33));
Marker[i] = new Bmap.marker (Me_point2,{icon:myicon}); Create a callout
Map.addoverlay (Marker[i]);
Info[i] = new window. Bmap.infowindow ("<p class= ' Addresstext ' > Name:" + Markerarr[i].name + "</br> Address:" + markerarr[i].address + " </br> Tel: "+ markerarr[i].mobile +" </br></p > "); Create an Information Window object
if (Markman==parseint (Markerarrlen)) {
for (Var h=0;h<markerarr.length;h++) {
Tag binding click event;
var Info2 = info;
Marker[h].index=h;
Marker[h].addeventlistener ("click", Function () {
Map.clickelen (This,info2,this.index);
});
}
}
}
}

10. Add information before clearing

Map.clearoverlays ();    Clear previously added annotations, etc.

Baidu Map API Custom Map