Hello World

The easiest way to start learning Baidu Map API is to look at a simple example. The following code creates a map with Tiananmen as the center of the map:

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>  
<style type="text/css">  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:100%}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
</head>  
 
<body>  
<div id="container"></div> 
<script type="text/javascript"> 
var map = new BMap.Map("container");          // 创建地图实例  
var point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别  
</script>  
</body>  
</html>

We will introduce it to you step by step below:

Prepare page

According to the HTML standard, every HTML document should declare the correct document type. We recommend that you use the latest document declaration that complies with the HTML5 specification:

<!DOCTYPE html>

You also You can choose other types of document declarations as needed, so that the browser will render the page in a standard way to ensure maximum compatibility of the page. We do not recommend that you use quirks mode for development.

Below we add a meta tag to make your page better displayed on mobile platforms.

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

Then we set the style so that the map fills the entire browser window:

<style type="text/css">  
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
</style>

Quote Baidu map API file Use the reference method of V1.4 and previous versions:

Create a map container element The map requires an HTML element as a container so that it can be displayed on the page. Here we have created a div element.

Namespaces The API uses BMap as the namespace, and all classes are under this namespace, such as: BMap.Map, BMap.Control, and BMap.Overlay.

Create a map instance

var map = new BMap.Map("container");

The Map class located under the BMap namespace represents the map, which can be accessed through the new operator Create a map instance. Its parameter can be an element id or an element object.

Note that when calling this constructor, you should ensure that the container element has been added to the map.

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 point. The Point class describes a geographical coordinate point, 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. The BMap.Map.centerAndZoom() method requires setting the center point coordinates and map level. The map must be initialized before other operations can be performed.

Map configuration and operation

After the map is instantiated and initialized, you can interact with it. The appearance and behavior of the map objects in the API are very similar to the maps interacted with on the Baidu Map website. It supports interactive functions such as mouse dragging, wheel zooming, and double-clicking to zoom in. You can also modify the configuration to change these features. For example, by default, the map does not support the mouse wheel zoom operation, because this may affect the user experience of 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 enable it. Configuration options can be found in the Configuration Methods section of the Map class reference.

Additionally, you can interact with the map programmatically. The Map class provides several methods for modifying the map state. For example: setCenter(), panTo(), zoomTo(), etc.

The following example shows a map that will move to a new center point after waiting two seconds. The panTo() method will smoothly move the map to the new center point. If the movement distance exceeds the current map area size, the map will jump straight to that point.

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
window.setTimeout(function(){  
    map.panTo(new BMap.Point(116.409, 39.918));    
}, 2000);

Hello World

Map configuration and operation

php.cn