How to use baidu map api to add controls on the map?

In previous tutorial of baidu map api, we’ve learned how to use baidu map api to display a map on web page. That is exiting, but the displayed map seems too simple. The only interaction we can do with the map is to use the mouse wheel to zoom in/out. In real map applications, you can see a few controls on top of a map, which can be used to do some interactions with the map. In the following example, we just add a single line of code, then we have a navigation control to navigate through the map(pan/zoom).

<!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>Baidu Map </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=E4805d16520de693a3fe707cdc962045"></script>	
</head>  
<body>
<div id="container"></div>
<script>
var map = new BMap.Map("container");  
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl());
</script>

</body>  
</html>

We can add more controls:

map.addControl(new BMap.ScaleControl());    
map.addControl(new BMap.OverviewMapControl());    
map.addControl(new BMap.MapTypeControl());

The navigation control is on the left-top of the map, the scale control is on the left-bottom, the overview map control is on the right-bottom(it is a little hard to see this control as it is represented as a little arrow which you can click to see the overview map), the map type control is on the right-top. You may think baidu map api must provide methods to customize the controls. Yes, you can pass an option object to the constructors of the controls to create customized controls. For example, if we want the navigation control is a little farther from the left boundary of the map and we only want a simpler navigation control, a navigation control without the zoom function, we can use the following code when creating the control:

var opt={offset: new BMap.Size(150, 5),type: BMAP_NAVIGATION_CONTROL_PAN};
map.addControl(new BMap.NavigationControl(opt));

Now, it seems we have mastered the baidu map api pretty well, and we can create a map with full functionalities. However, to use baidu map api in a real application scenario, we still have a lot work to do.

Did you like this?
Tip admin with Cryptocurrency