作業(yè)##
調(diào)用lbs接口,寫一個(gè)基于lbs的應(yīng)用(單頁多應(yīng)用),內(nèi)容包括 周邊查詢,地址正向解析和逆地址解析,出行規(guī)劃
注冊(cè) http://www.weatherdt.com/ 接口的賬號(hào)
作業(yè)總結(jié)##
周邊查詢
//輸入框提示功能
<script type="text/javascript">
// 百度地圖API功能
function G(id) {
return document.getElementById(id);
}
var map = new BMap.Map("l-map");
map.centerAndZoom("北京",12); // 初始化地圖,設(shè)置城市和地圖級(jí)別。
var ac = new BMap.Autocomplete( //建立一個(gè)自動(dòng)完成的對(duì)象
{"input" : "suggestId"
,"location" : map
});
ac.addEventListener("onhighlight", function(e) { //鼠標(biāo)放在下拉列表上的事件
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) { //鼠標(biāo)點(diǎn)擊下拉列表后的事件
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(){
map.clearOverlays(); //清除地圖上所有覆蓋物
function myFun(){
var pp = local.getResults().getPoi(0).point; //獲取第一個(gè)智能搜索的結(jié)果
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加標(biāo)注
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
</script>
//圓形區(qū)域檢索
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 創(chuàng)建Map實(shí)例
var mPoint = new BMap.Point(116.404, 39.915);
map.enableScrollWheelZoom();
map.centerAndZoom(mPoint,15);
var circle = new BMap.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
map.addOverlay(circle);
var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
local.searchNearby('餐館',mPoint,1000);
</script>
地址解析、逆地址解析###
//地址解析
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
// 創(chuàng)建地址解析器實(shí)例
var myGeo = new BMap.Geocoder();
// 將地址解析結(jié)果顯示在地圖上,并調(diào)整地圖視野
myGeo.getPoint("北京市海淀區(qū)上地10街", function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}else{
alert("您選擇地址沒有解析到結(jié)果!");
}
}, "北京市");
</script>
//逆地址解析
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
var geoc = new BMap.Geocoder();
map.addEventListener("click", function(e){
var pt = e.point;
geoc.getLocation(pt, function(rs){
var addComp = rs.addressComponents;
alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
});
});
</script>
出行規(guī)劃###
//公交
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
var transit = new BMap.TransitRoute(map, {
renderOptions: {map: map, panel: "r-result"}
});
transit.search("王府井", "西單");
</script>
//駕車
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
driving.search("中關(guān)村一街", "魏公村");
</script>
//步行
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}});
walking.search("天壇公園", "故宮");
</script>