Home > Developer > Web Develop
How to insert Baidu map in the webpage?
2. Switch the city, the search should be labeled location. (such as
Method/Step1. Enter: http://api.map.baidu.com/lbsapi/creatmap/(Create map-Baidu Map API WYSIWYG tools, Baidu official address, we are relieved to use)
Switch cities, the search needs to label the location. (e.g.:)
Set up a map: You can set the width of the site display map, the remaining options do not move.
Add annotations: After clicking on the first icon, find your location on the right and click the left mouse button to locate it. Change icon shape, name and comment to fill in location-related information at the marker icon. (e.g.:)
After completing the 4 steps above, click Get code.
Get the code as follows: (note: Usually we just insert the following code in the Web page, the bug is marked out, the rest can not be used.) ）
1. Insert the following code between <!--quote Baidu map api-->
<style type= "Text/css" >
html,body{margin:0;padding:0;}
. iw_poi_title {color: #CC5522; Font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space: NoWrap
. iw_poi_content {font:12px Arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap : Break-word}
</style>
<script type= "Text/javascript" src= "Http://api.map.baidu.com/api?key=&v=1.1&services=true" ></ Script>
2. Place the following code in <body></body> between the locations where the map is to be displayed: (The code calls the map)
<!--Baidu Map container--
<div style= "Width:697px;height:550px;border: #ccc solid 1px;" id= "Ditucontent" ></div>
3. The following code is placed at the bottom of the page (you can actually place it anywhere on the page.) ）
<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 (115.949652,28.693851);//define a center coordinate
Map.centerandzoom (point,18);//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: "Hundred-constant Network", content: "Phone:0791-88117053<br/> Mobile: 15079002975", point: "115.950312|28.693447", Isopen:1,icon: {W:23,h:25,l:46,t:21,x:9,lb:12}}
];
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://map.baidu.com/image/us_cursor.gif", 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>
Of course, if you want to lazy, will be above the corresponding code all in the <body></body> room is no problem, hehe.
Http://www.cnblogs.com/wgx214/archive/2013/04/27/3046467.html
Insert Baidu Map (example) in a webpage
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
