调用百度地图-带导航的百度地图

我想在木有提供地图接口的年代，前端工程师门要么只写上企业的具体地址，要么就是用一张标有自己位置的地图图片。但是现在不一样啦！为了增强用户体验，谷歌，甚至百度都很开放了，你可以在他们的网站上找到地图接口，通过进行直接的调用就可以了。

下面我来教你怎么在网页中用好百度地图，当然了，你也可以去百度地图网站去查找相关的技术资料。

首先你需要进入到百度地图官网http://developer.baidu.com/map/ 。因为我们是用的脚本进行加载的，所以我们要选择上图中的第一个“javascript api”，进去之后你会发现它的功能很强大有木有？

这里只是它的冰山一角。你可以在最下面“开始体验”。里面有源代码，你可以获取，然后放入到你的网页当中去。不过我今天讲的不是这么简单的。
我需要的是地图层，需要有移动，还需要能进行导航搜索功能。怎么实现呢？Copy下面的这段代码到你的网页中：

<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map('map');
var poi = new BMap.Point(116.307852,40.057031);
map.centerAndZoom(poi, 16);
map.enableScrollWheelZoom();
var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
'<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
'地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
'</div>';
//创建检索信息窗口对象
var searchInfoWindow = null;
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
title  : "百度大厦",      //标题
width  : 290,             //宽度
height : 105,              //高度
panel  : "panel",         //检索结果面板
enableAutoPan : true,     //自动平移
searchTypes   :[
BMAPLIB_TAB_SEARCH,   //周边检索
BMAPLIB_TAB_TO_HERE,  //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
var marker = new BMap.Marker(poi); //创建marker对象
marker.enableDragging(); //marker可拖拽
marker.addEventListener("click", function(e){
searchInfoWindow.open(marker);
})
map.addOverlay(marker); //在地图中添加marker
searchInfoWindow.open(marker); //在marker上打开检索信息串口
$("close").onclick = function(){
searchInfoWindow.close();
}
$("open").onclick = function(){
var enableSendToPhone = false;
if ($("enableSendToPhone").checked) {
enableSendToPhone = true;
}
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
title  : "百度大厦",      //标题
width  : 290,             //宽度
height : 105,              //高度
panel  : "panel",         //检索结果面板
enableAutoPan : true,     //自动平移
enableSendToPhone: enableSendToPhone, //是否启用发送到手机
searchTypes   :[
BMAPLIB_TAB_SEARCH,   //周边检索
BMAPLIB_TAB_TO_HERE,  //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
if ($("enableAutoPan").checked) {
searchInfoWindow.enableAutoPan();
} else {
searchInfoWindow.disableAutoPan();
};
searchInfoWindow.open(marker);
}
$("show").onclick = function(){
searchInfoWindow.show();
}
$("hide").onclick = function(){
searchInfoWindow.hide();
}
$("getPosition").onclick = function(){
var position = searchInfoWindow.getPosition();
alert("经度：" + position.lng + "；纬度：" + position.lat);
}
$("setValue").onclick = function(){
searchInfoWindow.setPosition(new BMap.Point($("lng").value, $("lat").value));
searchInfoWindow.setTitle($(“title”).value);
searchInfoWindow.setContent($(“content”).value);
}
$("getContent").onclick = function(){
alert(searchInfoWindow.getContent());
}
$("getTitle").onclick = function(){
alert(searchInfoWindow.getTitle());
}
function $(id){
return document.getElementById(id);
}
//样式1
var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", {
title:"信息框1", //标题
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
BMAPLIB_TAB_FROM_HERE, //从这里出发
BMAPLIB_TAB_SEARCH   //周边检索
]
});
function openInfoWindow1() {
searchInfoWindow1.open(new BMap.Point(116.319852,40.057031));
}
//样式2
var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "信息框2内容", {
title: "信息框2", //标题
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
BMAPLIB_TAB_SEARCH   //周边检索
]
});
function openInfoWindow2() {
searchInfoWindow2.open(new BMap.Point(116.324852,40.057031));
}
//样式3
var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "信息框3内容", {
title: "信息框3", //标题
width: 290, //宽度
height: 40, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
]
});
function openInfoWindow3() {
searchInfoWindow3.open(new BMap.Point(116.328852,40.057031));
}
var isPanelShow = false;
//显示结果面板动作
$("showPanelBtn").onclick = function(){
if (isPanelShow == false) {
isPanelShow = true;
$("showPanelBtn").style.right = "300px";
$("panelWrap").style.width = "300px";
$("map").style.marginRight = "300px";
$("showPanelBtn").innerHTML = "隐藏检索结果面板<br/>>";
} else {
isPanelShow = false;
$("showPanelBtn").style.right ="0px";
$("panelWrap").style.width = "0px";
$("map").style.marginRight = "0px";
$("showPanelBtn").innerHTML = "显示检索结果面板<br/><";
}
}
</script>

别以为这样就ok啦，还有这些也是需要滴！
用来装地图的盒子，盒子里要用 id="map"，还要有这个js库

<script type=”text/javascript” src=”http://api.map.baidu.com/api?v=1.5&ak=2b866a6daac9014292432d81fe9b47e3“></script>