Home > Developer > Web Develop
First, Introduction
The Baidu map JavaScript API is a set of application interfaces written in the JavaScript language that helps you build rich, interactive map applications on your site, including various interfaces for building the basic functionality of your map, and provides data services such as local search, route planning, and more.
Basic map Features: display (Support 2D, 3D, satellite), pan, zoom, drag and so on.
Map Control Display features: You can add/remove Hawkeye, toolbars, scale bars, custom copyrights, map types, and positioning controls on the map, and you can set the display position of the various controls.
Overlay function: support to add/remove points, lines, polygons, hot zones, administrative divisions, user-defined overlays on the map; The Open Source library provides features such as rich labeling, callout manager, aggregation marker, custom overlays, and more.
tool function: provide latitude and longitude coordinates and screen coordinates mutual turn function; The Open Source Library provides ranging, geometric operations and GPS coordinates/national Surveying bureau coordinates to Baidu coordinates and other functions.
positioning function: support IP location and browser (support HTML5 feature browser) location function.
Right-click menu function: support to add a right-click menu on the map.
Mouse Interactive function: support dynamic modification of mouse style, mouse drag/zoom map and mouse drawing and other functions.
Layer Features: supports resetting map basemaps, overlaying live traffic layers on the map, or customizing layer features.
Local Search functionality: includes POI search based on conditions such as city, rectangular range, circular range, and support for user-owned data retrieval.
Bus Search: support the starting point coordinates, the starting point name, the Localsearchpoi instance three kinds of retrieval condition retrieval; The results of the search support convenient, can transfer, less walk, no subway four kinds of programs.
Drive Search: support the starting point coordinates, the starting point name, the Localsearchpoi instance three kinds of retrieval condition retrieval; Returns the shortest time, the shortest distance, avoids the high-speed driving navigation result, and provides the calculation taxi fee service.
Walk Navigation: provides a walking navigation scheme.
Inverse/geocoding: supports the conversion service between Baidu coordinates and address description information.
Personalized Data presentation: user-owned data is stored in lbs. After the cloud, the JavaScript API provides the ability to present its own data in a point-of-view format.
Second, the introduction of the map
Create a map and take Tiananmen as the center of the map: ( secret key to get it yourself, key acquisition can see: http://www.cnblogs.com/0201zcr/p/4675028.html)
<!DOCTYPE HTML> <HTML> <Head> <Metaname= "Viewport"content= "initial-scale=1.0, User-scalable=no" /> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>Hello, World</title> <styletype= "Text/css">HTML{Height:100%}Body{Height:100%;margin:0px;padding:0px}#container{Height:100%} </style> <Scripttype= "Text/javascript"src= "http://api.map.baidu.com/api?v=1.5&ak= your Key">//v1.5 Version Reference: src= "http://api.map.baidu.com/api?v=1.5&ak= your Key"//v1.4 version and previous version of reference: Src= "http://api.map.baidu.com/api?v=1.4&key= your key &callback=initialize"</Script></Head> <Body> <DivID= "Container"></Div> <Scripttype= "Text/javascript"> varMap= NewBmap.map ("Container"); //Create a Map instancevar Point= NewBmap.point (116.404, 39.915); //Create point coordinatesMap.centerandzoom (Point, the); //initialize map, set center point coordinates and map level</Script> </Body> </HTML>
Analyze the role of each part:
Prepare page
According to the HTML standard, each HTML document should declare the correct document type, and we recommend that you use the latest document declaration that complies with the HTML5 specification:
<! DOCTYPE HTML >
Let's add a meta tag to make your page appear better on the mobile platform.
<name= "Viewport" content= "initial-scale=1.0, User-scalable=no" />
We then set the style so that the map fills the entire browser window:
<styletype= "Text/css">HTML{Height:100%}Body{Height:100%;margin:0px;padding:0px}#container{Height:100%} </style>
reference Baidu Map API files using V1.4 and previous versions of the reference method:
Creating a map container element map requires an HTML element as a container so that it can be displayed on the page. Here we create a DIV element.
The namespace API uses BMap as the namespace, and all classes are under that namespace, such as: Bmap.map, Bmap.control, Bmap.overlay.
Create a Map instance
var map = new Bmap.map ("container");The map class, located under the Bmap namespace, represents maps, and a map instance can be created with the new operator. Its parameters can be an element ID or an element object.
Note You should make sure that the container element is added to the map when you call this constructor.
Create point coordinates
var point = new Bmap.point (116.404, 39.915);
Here we use the Point class under the Bmap namespace to create a coordinate dot. The point class describes a geographic coordinates, where 116.404 represents longitude and 39.915 represents latitude.
Map initialization
Map.centerandzoom (Point, 15);
After creating the map instance, we need to initialize it, and the BMap.Map.centerAndZoom () method requires that you set the center point coordinates and the map level. The map must be initialized before other operations can be performed.
map Configuration and OperationOnce the map is instantiated and initialized, it can interact with it. The appearance and behavior of the map objects in the API are very similar to the maps that interact on the Baidu map site. It supports interactive functions such as mouse dragging, wheel zooming, double-clicking and zooming. You can also modify the configuration to change these features. For example, the map does not support mouse wheel scaling by default because it may affect the user experience for the entire page, but if you want to use the mouse wheel to control zooming in the map, you can call the Map.enablescrollwheelzoom method to turn it on. Configuration options can be found in the Configuration methods section of the map class reference.
In addition, you can interactively interact with the map in a programmatic way. The map class provides several ways to modify the state of a map. For example: SetCenter (), panto (), Zoomto (), and so on.
The following example shows a map that waits two seconds before it moves to the new center point. The panto () method will let the map move smoothly to the new center point, and if the move distance exceeds the current map area size, the map jumps straight to that point.
var map = new Bmap.map ("container"); var point = new Bmap.point (116.404, 39.915); Map.centerandzoom (point, N); Window.settimeout (function () { Map.panto (new Bmap.point (116.409, 39.918)); }, 2000);Three
Baidu map simple to use--html JS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
