百度地圖開發平臺地址：http://lbsyun.baidu.com/index.php?title=jspopular
在開發移動端網頁時，會遇到LBS的功能開發，利用第三方API是比較方便的。下面對百度地圖的JS開發API應用做一些說明。
1.引入相關CSS文件和庫文件
JavaScript API v1.4及以前版本無須申請密鑰（ak），自v1.5版本開始需要先申請密鑰（ak），才可使用，如需獲取更高配額，請點擊申請認證企業用戶。
地址：http://api.map.baidu.com/api?v=1.4
//參數v表示您加載API的版本，使用JavaScript APIv1.4及以前版本可使用此方式引用。
http://api.map.baidu.com/api?v=2.0&ak=您的密鑰
//使用JavaScript APIv2.0請先申請密鑰ak，按此方式引用。
<link rel="stylesheet" />
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
2.在html中創建地圖部分的容器
<div id="allmap" style="height: 400px;opacity: 0;"></div>
3.開始實例化創建
//實例化一個地圖對象，綁定id為allmap
var map = new BMap.Map("allmap");
//開放插件功能
map.enableScrollWheelZoom();//滾動縮放
map.addControl(new BMap.NavigationControl());//地圖的平移縮放控件
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.addControl(new BMap.GeolocationControl());
// 定位功能
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var myIcon = new BMap.Icon("http://api0.map.bdimg.com/images/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(23, 25), imageOffset: new BMap.Size(0, - 10 * 25) });
//添加位置圖標，標注當前位置
var mk = new BMap.Marker(r.point,{icon: myIcon});
map.centerAndZoom(new BMap.Point(r.point.lng,r.point.lat), 14);
map.addOverlay(mk);
map.panTo(r.point);
//向地圖中添加自定義地點圖標方法
function addMarker(point,index,data){
var storeIcon = new BMap.Icon("http://api0.map.bdimg.com/images/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(23, 25),
imageOffset: new BMap.Size(0, - index * 25)
});
//創建信息窗口
var messContent = '<div style="margin:0;line-height:20px;padding:2px;">' + '地址：'+data.address+'<br/>電話：'+data.tel+ '</div>';
var searchInfoWindow = null;
searchInfoWindow = new BMapLib.SearchInfoWindow(map, messContent, {
title : data.name, //標題
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(point,{icon: storeIcon});
marker.addEventListener("click", function(e){ searchInfoWindow.open(marker); })
map.addOverlay(marker);}
}else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true})```
網頁實現效果如下