LBS應用開發(fā)(百度地圖API)

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>

如圖:

Paste_Image.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 不支持上傳文件,所以就復制過來了。作者信息什么的都沒刪。對前端基本屬于一竅不通,所以沒有任何修改,反正用著沒問題就...
    全棧在路上閱讀 2,061評論 0 2
  • 背景 一年多以前我在知乎上答了有關LeetCode的問題, 分享了一些自己做題目的經驗。 張土汪:刷leetcod...
    土汪閱讀 12,899評論 0 33
  • 朋友陳在中國駐瑞士大使館工作,1998年夏天他向我提了三個問題。 第一個問題是,瑞士手表的產量及...
    喬橋閱讀 316評論 3 3
  • 生活的奇妙和精彩就在于不同的人會教你不同的東西。 這一天的心情好比過山車 跌宕起伏 又回味無窮 早上被鬧鐘叫醒 精...
    凱琳kate閱讀 169評論 0 0
  • 考完了試,和室友一起看《七月與安生》。兩個性格看似截然不同、人生軌跡不同的女孩,從十三歲就走到了一起。一起吃飯、洗...
    驥馳閱讀 388評論 0 3

友情鏈接更多精彩內容