1. Create map: var map = new Bmap.map ("divID");
2. Create coordinate points: var point = new Bmap.point ("longitude", "latitude");
3. Set the View center point: map.centerandzoom (point,size);
4. Activate the wheel sizing function:map.enablescrollwheelzoom ();
5. Add Control: Map.addcontrol (New Bmap.xxx ());
6. Add cover: Map.addoverlay ();
1.NavigationControl: The control of the zoom map, default in the upper left corner;
2.OverviewMapControl: Thumbnail control of the map, default to the lower right;
3.ScaleControl: Map display scale control, default at bottom left;
4.MapTypeControl: Map type control, default in upper right;
Map.addcontrol () method to add a control;
Introduction of covering materialA covering is something that is covered on a map;
1. Callout: Marker(1) Add callout at point: var marker = new Bmap.marker
(2) Add covering: Map.addoverlay (marker);
(3) The drag function to activate the callout: marker.enabledragging ();
(4) Adding an event for the callout: Marker.addeventlistener ("Name", function () {
Click on the event after labeling
});
(5) Remove the covering: map.removeoverlay (marker);
(6) Destruction Label: Marker.dispose ();
2. Information window: Infowindow(1) Create an information window in a specific location: var Infowindow = new Bmap.infowindow ("content", {width:250,height:100,title: "Hello"});
(2) Open the Information window in the center of the map: Map.openinfowindow (Infowindow,map.getcenter ());
3. Line: Polyline(1) var polyline = new Bmap.polyline ([New Bmap.point (X1,Y1), New Bmap.point (X2,y2), New Bmap.point (X3,Y3)],{strokecolor: "Blue", Strokeweight:6, strokeopacity:0.5});
(2) Map.addoverlay (polyline);
Original file
<! DOCTYPE html>
<title> About Us </title>
<meta charset= "Utf-8"/>
<link rel= "stylesheet" type= "Text/css" href= "Css/common.css" >
<link rel= "stylesheet" type= "Text/css" href= "Css/wy.css" >
<body>
<div id= "Header" ></div>
<div class= "Content" >
<!---
<div class= "Cont-map" id= "Ditucontent" ></div>
</div>
</body>
<script type= "Text/javascript" src= "Js/jquery.min.js" ></script>
<script type= "Text/javascript" src= "Js/common.js" ></script>
<script type= "Text/javascript" src= "Http://api.map.baidu.com/api?key=&v=1.1&services=true" ></ Script>
<script type= "Text/javascript" >
To create and initialize a map function:
function Initmap () {
Createmap ();//Create a map
Setmapevent ();//Set Map events
Addmapcontrol ();//Add controls to the map
Addmarker ();//Add marker to the map
}
To create a map function:
function Createmap () {
var map = new Bmap.map ("ditucontent");//Create a map in the Baidu map container
var point = new Bmap.point (120.112582,30.33892);//define a center coordinate
Map.centerandzoom (point,17);//Set the center point and coordinates of the map and display the map in the map container
Window.map = map;//Stores the map variable in the global
}
Map Event Settings function:
function Setmapevent () {
Map.enabledragging ();//enable map drag events, enabled by default (can not be written)
Map.enablescrollwheelzoom ();//enable map wheel Zoom Out
Map.enabledoubleclickzoom ();//enable mouse double-click to zoom in, enabled by default (can not write)
Map.enablekeyboard ();//enable keyboard to move the map up or down
}
Add a function to the map control:
function Addmapcontrol () {
Add a zoom control to a map
var ctrl_nav = new Bmap.navigationcontrol ({anchor:bmap_anchor_top_left,type:bmap_navigation_control_large});
Map.addcontrol (Ctrl_nav);
Add a thumbnail control to your map
var ctrl_ove = new Bmap.overviewmapcontrol ({anchor:bmap_anchor_bottom_right,isopen:1});
Map.addcontrol (Ctrl_ove);
Add a scale bar control to a map
var Ctrl_sca = new Bmap.scalecontrol ({anchor:bmap_anchor_bottom_left});
Map.addcontrol (CTRL_SCA);
}
Callout Points Group
var Markerarr = [{title: "Thai ka yuen block a 15 floor", Content: "Hangzhou Security Network Technology Co., Ltd.", point: "120.112672|30.339052", isopen:0,icon:{w:21,h:21,l : 0,t:0,x:6,lb:5}}
];
Create marker
function Addmarker () {
for (Var i=0;i<markerarr.length;i++) {
var json = markerarr[i];
var p0 = json.point.split ("|") [0];
var P1 = json.point.split ("|") [1];
var point = new Bmap.point (P0,P1);
var iconimg = Createicon (Json.icon);
var marker = new Bmap.marker (point,{icon:iconimg});
var IW = Createinfowindow (i);
var label = new Bmap.label (json.title,{"offset": New Bmap.size (JSON.ICON.LB-JSON.ICON.X+10,-20)});
Marker.setlabel (label);
Map.addoverlay (marker);
Label.setstyle ({
BorderColor: "#808080",
Color: "#333",
Cursor: "Pointer"
});
(function () {
var index = i;
var _iw = Createinfowindow (i);
var _marker = marker;
_marker.addeventlistener ("click", Function () {
This.openinfowindow (_IW);
});
_iw.addeventlistener ("Open", function () {
_marker.getlabel (). Hide ();
})
_iw.addeventlistener ("Close", function () {
_marker.getlabel (). Show ();
})
Label.addeventlistener ("click", Function () {
_marker.openinfowindow (_IW);
})
if (!! Json.isopen) {
Label.hide ();
_marker.openinfowindow (_IW);
}
})()
}
}
Create Infowindow
function Createinfowindow (i) {
var json = markerarr[i];
var iw = new Bmap.infowindow ("<b class= ' iw_poi_title ' title= '" + Json.title + ">" + json.title + "</b><div class= ' iw_poi_content ' > "+json.content+" </div> ");
return IW;
}
Create an icon
function Createicon (JSON) {
var icon = new Bmap.icon ("Http://app.baidu.com/map/images/us_mk_icon.png", New Bmap.size (Json.w,json.h), {Imageoffset : New Bmap.size (-JSON.L,-JSON.T), Infowindowoffset:new bmap.size (json.lb+5,1), Offset:new bmap.size (Json.x,json.h)})
return icon;
}
Initmap ();//Create and initialize maps
</script>
Baidu Map API Learning
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
