最近項目中用到了百度地圖API開發了一些小功能。總結下，和大家分享。在這裏我拿JS的API來講解。要是實際開發還請詳細閱讀百度地圖API官方手冊。地址：http://developer.baidu.com/map/index.html。在這裏
百度地圖JavaScript API是一套由JavaScript語言編寫的應用程序接口，可幫助您在網站中構建功能豐富、交互性強的地圖應用，支持PC端和移動端基於瀏覽器的地圖應用開發，且支持HTML5特性的地圖開發。另外，2014年1月9日，極速版JavaScript API全新上線，此版本專門針對移動端瀏覽器開發提供。該套API免費對外開放。自v1.5版本起，您需先申請密鑰（ak）纔可使用，接口（除發送短信功能外）無使用次數限制。
申請方式地址：http://lbsyun.baidu.com/apiconsole/key 如下圖：
創建好應用後，會得到應用信息：
接下來就可以開發啦！我們先一個小的demo引入，展示一張無控件的簡單百度地圖。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=您的密鑰&v=1.0"></script>
<title>百度地圖的Hello, World</title>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} @media (max-device-width: 780px){#golist{display: block!important;}}#golist {display: none;}
</style>
</head>
<body>
<a id="golist" href="../demolist.htm">返回demo列表頁</a>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 創建Map實例
var point = new BMap.Point(116.404, 39.915); // 創建點座標
map.centerAndZoom(point,15); // 初始化地圖,設置中心點座標和地圖級別。
map.addControl(new BMap.ZoomControl()); //添加地圖縮放控件
</script>http://developer.baidu.com/map/jsdemo-mobile.htm#a1_1
接下來我分享下我做的一個應用。
/**********************************************************************************/
$(function(){
userPosition = eval(userPosition);
branchData = eval(branchData);
showMap(userPosition['position'], branchData);
if ( ! userPosition['status'] && navigator.geolocation) { //若API未獲取到用戶座標則通過瀏覽器獲取
navigator.geolocation.getCurrentPosition(success);
}
/******************************************************************************/
/**
* 通過瀏覽器獲取用戶所在位置成功後回調函數
* @author bob <[email protected]>
*/
function success(position)
{
var coords = position.coords;
var userPosition = {longitude:coords.longitude, latitude:coords.latitude};
$.ajax({
type: "POST",
url: XXX,
data: userPosition,
timeout: 1000,
dataType: 'html',
error: function(){showDefaultMap()},
success: function(result){showMap(userPosition, result);}
});
}
/**
* 顯示地圖
* @author bob <[email protected]>
*/
function showMap(userPosition, branchData)
{
getAddressDetail(userPosition);
if (typeof(branchData) == 'string') {
branchData = eval(branchData);
}
var userLongitude = userPosition['longitude'];
var userLatitude = userPosition['latitude'];
var map = new BMap.Map("allmap"); // 創建Map實例
var point = new BMap.Point(userLongitude, userLatitude); // 創建點座標
/************************/
var myIcon = new BMap.Icon(baseHost+"/images/user.png",
new BMap.Size(22, 27), {
anchor: new BMap.Size(7, 25),
});
var marker = new BMap.Marker(point, {icon: myIcon});
map.centerAndZoom(point, 12); // 初始化地圖,設置中心點座標和地圖級別。
map.addOverlay(marker);
/************************/
map.addControl(new BMap.ZoomControl()); //添加地圖縮放控件
if (typeof(branchData) != 'nudefined') {
for (var i = 0; i < branchData.length; i++) {
var point = new BMap.Point(branchData[i]['geo']['longitude'], branchData[i]['geo']['latitude']);
addMarker(map, point, branchData[i], i, userPosition);
}
}
}
/**
* 若地理位置獲取失敗則加載默認地圖
* @author bob <[email protected]>
*/
function showDefaultMap()
{
//TODO
}
/**
* 創建圖標對象
* @author bob <[email protected]>
*/
function addMarker(map, point, branchData, index, userPosition)
{
var myIcon = new BMap.Icon("http://api.map.baidu.com/mapCard/img/location.gif",
new BMap.Size(14, 23), {
anchor: new BMap.Size(7, 25),
});
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
addMessage(marker, branchData, userPosition);
}
/**
* 根據座標獲取點的詳細地址
* @author bob <[email protected]>
*/
function getAddressDetail(point)
{
var gc = new BMap.Geocoder();
var pt = new BMap.Point(point['longitude'], point['latitude']);
var a = gc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
var address = addComp.district + "," + addComp.street;
$("#userAddress").attr("value", address);
});
}
/**
* 顯示路線圖
*
*{name:string, latlng:Lnglat}
* opts:
* mode：導航模式，固定爲
* BMAP_MODE_TRANSIT、BMAP_MODE_DRIVING、
* BMAP_MODE_WALKING、BMAP_MODE_NAVIGATION
* 分別表示公交、駕車、步行和導航，（必選）
* region：城市名或縣名 當給定region時，認爲起點和終點都在同一城市，除非單獨給定起點或終點的城市
* origin_region/destination_region：同上
*
* @author bob <[email protected]>
*/
function showLine(userPosition, branchData)
{
$('.gohere').click(function(){
var userAddress = $("#userAddress").attr("value");
var start = {
latlng: new BMap.Point(userPosition['longitude'], userPosition['latitude']),
name: userAddress
}
var end = {
latlng: new BMap.Point(branchData['geo']['longitude'], branchData['geo']['latitude']),
name: branchData['station_address']
}
var opts = {
mode: BMAP_MODE_TRANSIT,//公交、駕車、導航均修改該參數
region: branchData['city']
}
var routeSearch=new BMap.RouteSearch();
routeSearch.routeCall(start,end,opts);
})
}
/**
* 創建浮層對象
* @author bob <[email protected]>
*/
function addMessage(marker, branchData, userPosition)
{
var phone = '';
var phonenumber = branchData['phone_number'];
for (var i = 0; i < phonenumber.length; i++) {
phone += "<div class='telInc'><a href='tel:"+phonenumber[i]+"'>"+phonenumber[i]+"</a></div>";
}
var content = "<article class='wrap wdcx'>"+
"<div class='tips' width='80%' style='color:#000000;'>"+
"<h3 class='title'>"+branchData['station_name']+"</h3>"+
"<p class='con'><font>地址："+branchData['station_address']+"</p>"+
"<div class='con'>"+
"<span class='floatLeft'>電話：</span>"+
"<span class='phoneList'>"+phone+"</span>"+
"</div>"+
"<div class='gobutton'>"+
"<span class='gobutton'><a class='gohere' href='javascript:void(0)'>去這裏</a></span>"+
"</div>"+
"</div>"+
"</article>";
var infoWindow = new BMap.InfoWindow(content); // 創建信息窗口對象
marker.addEventListener("click", function(){
this.openInfoWindow(infoWindow);
showLine(userPosition, branchData);
infoWindow.redraw();
});
}
});
