A Baidu map is often embedded in the company introduction on the website, which is recorded here.
1. First create a Baidu map application and get AK.
Click to apply: apply for Baidu map application
2. Get the Baidu map import code
Click to get: Get the map import code
According to the steps of creating a map, set the company location, set the properties of the map (size, location, status...), add company labels, etc., and finally click Get Code, you can get the generated map code, and then copy it to the map to be imported. html file. as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Baidu Map, Baidu Map API, Baidu Map Custom Tool, Baidu Map WYSIWYG Tool" />
<meta name="description" content="Baidu Map API to customize maps to help users generate Baidu maps under visual operations" />
<title>Baidu Map API Custom Map</title>
<!--Reference Baidu Map API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密匙"></script>
</head>
<body>
<!--Baidu Map Container-->
<div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>
<p style="color:red;font-weight:600">The map generation tool is developed based on Baidu Maps JS api v2.0, please apply for a key.
<a href="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7" target="_blank">Learn how to apply for a key</a a>
<a href="http://lbsyun.baidu.com/apiconsole/key?application=key" style="color:#2f83c7" target="_blank">申请密匙</a>
</p>
</body>
<script type="text/javascript">
//Create and initialize map functions:
function initMap(){
createMap();//Create a map
setMapEvent();//Set map event
addMapControl();//Add a control to the map
addMapOverlay();//Add overlay to the map
}
function createMap(){
map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(104.076099,30.662113),16);
}
function setMapEvent(){
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
}
function addClickHandler(target,window){
target.addEventListener("click",function(){
target.openInfoWindow(window);
});
}
function addMapOverlay(){
var markers = [
{content:"There are Metro Line 1 and Metro Line 2 nearby",title:"Chengdu Tianfu Square",imageOffset: {width:0,height:3},position:{lat:30.663667,lng:104.07229}}
];
for(var index = 0; index < markers.length; index++ ){
var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
})});
var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
var opts =
width: 200,
title: markers[index].title,
enableMessage: false
};
var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
marker.setLabel(label);
addClickHandler(marker,infoWindow);
map.addOverlay(marker);
};
}
// add controls to the map
function addMapControl(){
var scaleControl = new BMap.ScaleControl ({anchor: BMAP_ANCHOR_BOTTOM_LEFT);
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(navControl);
}
var map;
initMap();
</script>
</html>
When introducing Baidu Maps, replace the AK (key) applied in the first step to get the desired map. as follows:
