Detailed steps for embedding Baidu Maps in web pages and using Baidu Maps API to customize maps

Insert Baidu Map into the web page

If you want to add Baidu Maps to your own web page, you can use the Baidu Maps API. The specific usage is as follows:

Step 1: Go to Baidu's map creation website http://api.map.baidu.com/lbsapi/creatmap/ and search for the location you want to display, as shown in the figure below.

Step 2: Set the map. You can set the width and height of the map displayed on the website, and keep the other options unchanged.

Step 3: Add annotations. After clicking the first icon, find your position on the right and click the left mouse button to locate it. The shape of the mark icon can be changed, and the name and notes can be filled in with location-related information.

Step 4: Get the code. Just paste the code into your web page. The code is as follows:

Copy code

The 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>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<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, helps users generate Baidu maps under visual operation" />
<title>Baidu Map API Custom Map</title>

<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>>
</head></p> <p><body>

<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
//Create and initialize the map function:
function initMap(){
createMap(); //Create a map
setMapEvent(); //Set map event
addMapControl(); //Add controls to the map
}

//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 point 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; //Store the map variable globally
}

//Map event setting function:
function setMapEvent(){
map.enableDragging(); //Enable map dragging events, enabled by default (optional)
map.enableScrollWheelZoom(); //Enable the map scroll wheel to zoom in and out
map.enableDoubleClickZoom(); //Enable mouse double-click zoom, enabled by default (optional)
map.enableKeyboard(); //Enable the up, down, left, and right keys on the keyboard to move the map
}

//Map control add function:
function addMapControl(){
//Add a zoom control to the 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 the map
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//Add a scale control to the map
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}
initMap(); //Create and initialize the map
</script>
</html>

<<: Using VMware IOInsight to perform refined virtual machine storage performance monitoring

>>: Font Treasure House 50 exquisite free English font resources Part 1