Baidu map js Summary

1. To obtain the javascript API service method, first apply for an accesskey to load the APIJS file.

The usage is as follows:

<Script type = "text/javascript" src = "http://api.map.baidu.com/api? V = 2.0 & ak = your key "> </script>

If you need to limit the region, You need to introduce the following js

<Script type = "text/javascript" src = "http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"> </script>

2. Set the style to full screen. The window style is displayed.

Body, html, # l-map {width: 100%; height: 100%; overflow: hidden; margin: 0 ;}

3. Call Baidu Map

Var map = new BMap. Map ("l-map"); // create a map instance

Var point = new BMap. Point (111.818239, 41.386087); // create Coordinate

Map. centerAndZoom (point, 5); // initializes the map and sets the coordinates of the center and map level.

Map. enableScrollWheelZoom ();

Map. addControl (new BMap. NavigationControl (); // Add the default zoom/PAN Control

4. Add the zoom and Pan control.

Map. addControl (new BMap. NavigationControl (); // Add the default zoom/PAN Control

Map. addControl (new BMap. NavigationControl ({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); // the upper right corner contains only the translate and zoom buttons.

Map. addControl (new BMap. NavigationControl ({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}); // in the lower left corner, only the translation button is included.

Map. addControl (new BMap. NavigationControl ({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}); // the lower right corner contains only the zoom button.

Map. enableScrollWheelZoom (); // enables scroll wheel zoom in and out, which is disabled by default.

Map. enableContinuousZoom (); // enable map inertial drag and drop. disabled by default.

5. The preceding region restriction js must be introduced to the region restriction.

The region restriction example shows only Beijing

Var B = new BMap. Bounds (new BMap. Point (116.027143, 39.772348 ),

New BMap. Point (116.832025, 40.126349 ));

Try {

BMapLib. AreaRestriction. setBounds (map, B );

} Catch (e ){

Alert (e );

}

6. Add a cover and use a timer to call the cover.

// Add a cover

Function getBoundary (){

Var bdary = new BMap. Boundary ();

Bdary. get ("Inner Mongolia", function (rs) {// obtain the Administrative Region

Var count = rs. boundaries. length; // number of points in the administrative region

For (var I = 0; I <count; I ++ ){

Var ply = new BMap. polygon (rs. boundaries [I], {strokeWeight: 2, strokeColor: "# 0000ff", fillColor: "}); // create a polygon cover and display the fillColor font.

Map. addOverlay (ply); // Add a covering

Map. setViewport (ply. getPath (); // adjust the field of view

}

});

}

// Timer call to add a cover

SetTimeout (function (){

// Clear the map covering

Map. clearOverlays ();

Map. centerAndZoom (111.818239, 41.386087, 6); // sets the map coordinates and levels.

// Add Administrative Region coverage

GetBoundary ();

},1000 );

7. Add Annotation

// Point longitude and latitude, txtinfo prompt information, type Image type

Function addMarker (point, txtInfo, type ){

Var infoWindow = "";

Var marker = new BMap. Marker (point, {icon: mapIcon (type )});

Marker. addEventListener ("click", function (){

InfoWindow = new BMap. InfoWindow (txtInfo );

This. openInfoWindow (infoWindow );

});

Map. addOverlay (marker); // Add Annotation

}

// Create an ICON

Function mapIcon (type ){

Var mappng;

Switch (parseInt (type )){

Case 1:

Mappng = "$ {pageContext. request. contextPath}/images/triangle.png ";

Break;

Case 2:

Mappng = "$ {pageContext. request. contextPath}/images/ban.png ";

Break;

}

Var mapIcon = new BMap. Icon (mappng,

New BMap. Size (24, 24 ),{

Offset: new BMap. Size (0,-5 ),

ImageOffset: new BMap. Size (0, 0)

});

Return mapIcon;

}

8. Remove Annotation

Map. removeOverlay (marker); // remove the annotation point

9. Enter the address to obtain the longitude and latitude

Public static final String KEY_1 = "your key (ak )";

/**
* Returns the latitude and longitude coordinates of the input address.
* Key lng (longitude), lat (latitude)
*/
Public static Map GetGeocoderLatitude (String address ){
BufferedReader in = null;
Try {
// Convert the address to a hexadecimal value of UTF-8.
Address = URLEncoder. encode (address, "UTF-8 ");
// If there is a proxy, you need to set the proxy. If there is no proxy, you can comment it out.
// System. setProperty ("http. proxyHost", "192.168.1.188 ");
// System. setProperty ("http. proxyPort", "3128 ");
URL tirc = new URL ("http://api.map.baidu.com/geocoder? Address = "+ address +" & output = json & key = "+ KEY_1 );

In = new BufferedReader (new InputStreamReader (tirc. openStream (), "UTF-8 "));
String res;
StringBuilder sb = new StringBuilder ("");
While (res = in. readLine ())! = Null ){
Sb. append (res. trim ());
}
String str = sb. toString ();
Map Map = null;
If (StringUtils. isNotEmpty (str )){
Int lngStart = str. indexOf ("lng \":");
Int lngEnd = str. indexOf (", \" lat ");
Int latEnd = str. indexOf ("}, \" precise ");
If (lngStart> 0 & lngEnd> 0 & latEnd> 0 ){
String lng = str. substring (lngStart + 5, lngEnd );
String lat = str. substring (lngEnd + 7, latEnd );
Map = new HashMap ();
Map. put ("lng", lng );
Map. put ("lat", lat );
Return map;
}
}
} Catch (Exception e ){
E. printStackTrace ();
} Finally {
Try {
In. close ();
} Catch (IOException e ){
E. printStackTrace ();
}
}
Return null;
}
Public static void main (String args []) {
Map Json = MapAction. getGeocoderLatitude ("Beijing ");
System. out. println ("lng:" + json. get ("lng "));
System. out. println ("lat:" + json. get ("lat "));
}