LBS(Location-Based Services),又稱位置服務,LBS是由移動通信網絡和衛(wèi)星定位系統(tǒng)結合在一起提供的一種增值業(yè)務,通過一組定位技術獲得移動終端的位置信息(如經緯度坐標數據),提供給移動用戶本人或他人以及通信系統(tǒng),實現各種與位置相關的業(yè)務。實質上是一種概念較為寬泛的與空間位置有關的新型服務業(yè)務。
先登錄百度地圖平臺 http://lbsyun.baidu.com/
以web開發(fā)為為例,所以選擇Javascript API。
百度地圖JavaScript API是一套由JavaScript語言編寫的應用程序接口,可幫助您在網站中構建功能豐富、交互性強的地圖應用,支持PC端和移動端基于瀏覽器的地圖應用開發(fā),且支持HTML5特性的地圖開發(fā)。極速JavaScript API全新上線,此版本專門針對簡單功能的移動端瀏覽器開發(fā)提供。
該套API免費對外開放。需先申請密鑰(ak)才可使用,接口(除發(fā)送短信功能外)無使用次數限制。
<!DOCTYPE >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>自動提示</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘鑰">
<script>
<style type="text/css">
body{font-size:13px;margin:0px}
container{width:600px;height:400px}
.label{margin-left:20px;font-weight:bold;font-size:14px}
</style>
</head>
<body>
<div style="margin:50px">請輸入:<input type="text" id="suggestId" size="30" value="百度" style="width:300px;" /></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:300px;height:600px;position:absolute;left: 650px;top:20px;"></div>
<div id="container"></div>
<script type="text/javascript">
function G(id) {
return document.getElementById(id);
}
var map = new BMap.Map("container");
var point = new BMap.Point(116.3964,39.9093);
map.centerAndZoom(point,13);
map.enableScrollWheelZoom();
var ac = new BMap.Autocomplete( //建立一個自動完成的對象
{"input" : "suggestId"
,"location" : map
});
ac.addEventListener("onhighlight", function(e) { //鼠標放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function(e) { //鼠標點擊下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
setPlace();
});
function setPlace(){// 創(chuàng)建地址解析器實例
var myGeo = new BMap.Geocoder();// 將地址解析結果顯示在地圖上,并調整地圖視野
myGeo.getPoint(myValue, function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}
}, "北京");
}
</script>
</body>
</html>
如圖:
