Detailed steps to embed Baidu maps and customize maps using Baidu Map API

This article mainly introduces the Web page embedded Baidu map and the use of Baidu Map API custom map Detailed steps

Insert Baidu Map in Web page

If you want to add Baidu map on your own page, you can use the Baidu Map API. Use the following methods:

The first step: Enter Baidu to create a map of the site http://api.map.baidu.com/lbsapi/creatmap/, search out the location you want to show, as shown.

The second step: set the map, you can set the site to display the width of the map, the remaining options do not move.

Step three: Add a callout. After clicking on the first icon, locate 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.

Fourth step: Get the code. Pasting the code into your Web page will be OK. The code is as follows:

Copy CodeThe code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "<a href=" http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<meta name= "keywords" content= "Baidu map, Baidu Map API, Baidu Map Customization Tool, Baidu Map WYSIWYG tool"/>
<meta name= "description" content= "Baidu Map API custom map to help users generate Baidu map under the visual operation"/>
<title> Baidu Map API custom Map </title>
<!--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= "<a href=" Http://api.map.baidu.com/api?key=&v=1.1&services=true " ></script ">http://api.map.baidu.com/api?key=&v=1.1&services=true" ></script</a> >
<!--Baidu Map container--
<div style= "Width:697px;height:550px;border: #ccc solid 1px;" id= "Ditucontent" ></div>
</body>
<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
}

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 (113.116257,27.822879);//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);
}
Initmap ();//Create and initialize maps
</script>

Detailed steps to embed Baidu maps and customize maps using Baidu Map API