Baidu map the development of self-feelings

<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<-! Next, we add a meta tag to your pages to make better display on a mobile platform. ->
<Meta name = "the viewport" Content = "Initial-Scale = 1.0, NO = Scalable-User" />
<Meta charset = "UTF-. 8">
<title> the Document </ title>
<style type = " text / CSS ">
HTML {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
/ * Note that if the container does not set the style not be displayed * /
#container {
height: 100 %
}
</ style>
<-! Baidu Maps API reference file ->
<Script of the type = "text / JavaScript" src = "http://api.map.baidu.com/api?v=3.0&



<! - Create map container element ->
<div ID = "Container"> </ div>
<Script>
// class Map is located in the namespace represented BMap map, a map can be created instance of the new operator. Its parameters can be an element id can also be an element object.
new new BMap.Map the Map = var ( "Container");
// set the coordinates of the center coordinate to coordinate their own can also set other coordinate
var Point = new new BMap.Point (114.410968,30.482142);
// initialize the map, and set the map display level
map.centerAndZoom (Point, 15);
// at this point, we can quickly create a piece of his own position as the center of the map -
// turn the mouse wheel to zoom
// map of the mouse wheel zoom is disabled by default, requiring configuration is turned on.
map.enableScrollWheelZoom (true); // turn the mouse wheel zoom

// add some controls here
// control as well as control the properties of some controls
Map.addControl (BMap.NavigationControl new new ());
Map.addControl (BMap.ScaleControl new new ());
Map.addControl (BMap.OverviewMapControl new new () );
Map.addControl (BMap.MapTypeControl new new ());


</script>
</body>
</html>

 

These are a simple example pages can only display the map and scrolling the mouse can also add some indents location map mobile controls, set the control as follows.

Modify the control configuration
Maps API control provides a wealth of configuration parameters, you can refer to the API documentation in order to get them to modify the appearance of controls to meet the requirements. For example, NavigationControl control provides the following types:
 
 
 
Pan type of zoom control
 
BMAP_NAVIGATION_CONTROL_LARGE represent a complete pan the display zoom controls
 
BMAP_NAVIGATION_CONTROL_SMALL display represents a small pan and zoom controls
 
BMAP_NAVIGATION_CONTROL_PAN means that only part of the functions of the control pan
 
BMAP_NAVIGATION_CONTROL_ZOOM means that only some of the features zoom controls
 

 

 

Control Control position
When the control is initialized, it may provide an optional parameter, which anchor and offset property jointly control the position of the controls on the map. anchor represents the stop position control, that control is docked in which corner of the map. When the map size changes, the controls will be adjusted depending on their position parked position.
 
anchor value
 
BMAP_ANCHOR_TOP_LEFT Represents a control located in the upper left corner of the map
 
BMAP_ANCHOR_TOP_RIGHT Represents a control located in the upper right corner of the map
 
BMAP_ANCHOR_BOTTOM_LEFT Represents a control located in the upper right corner of the map
 
BMAP_ANCHOR_BOTTOM_RIGHT located in the left corner of the control map
 
 

 

Guess you like

Origin www.cnblogs.com/jiangquhan/p/11503128.html