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

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

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

首先你须要进入到百度地图官网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>




来看看效果：

这里有些地方是能够更改的var poi = new BMap.Point(116.307852,40.057031);用来修改你具体位置在地图上的坐标点；map.centerAndZoom(poi, 16);能够用来显示地图层的，在地图上滚动你的滑轮你注意下就知道了。

要是我不知道个人具体位置的坐标点或者我想把地点弄的更精确怎么办？

你能够用坐标拾取工具，或者是用快速生成工具

怎么样？这样的用户体验是否是蛮拉轰的？
不过咱们须要知道的是，在给用户带来了好的体验的同时也是有损失的。利用对外的加载会让咱们的网页打开速度降低。
若是你还有什么不懂的，能够留言哦！

原文连接：http://www.qianduanview.com/237.html

http://my.oschina.net/u/1995422/blog/308380