如何在網頁中調用百度地圖api

我想在木有提供地圖接口的年代，前端工程師門要麼只寫上企業的具體地址，要麼就是用一張標有本身位置的地圖圖片。可是如今不同啦！爲了加強用戶體驗，谷歌，甚至百度都很開放了，你能夠在他們的網站上找到地圖接口，經過進行直接的調用就能夠了。

下面我來教你怎麼在網頁中用好百度地圖，固然了，你也能夠去百度地圖網站去查找相關的技術資料。

首先你須要進入到百度地圖官網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