前面記錄了怎麼上傳自定義資料, 下面說一下怎麼展示資料.
其實百度api 有很多資料展示的例子, 但是隻看案例到後面就會發現用案例裡面的方法有很大的局限性.
我想要的是展示使用者附近的網點. 第一次做是看案例比着葫蘆畫瓢
* 使用 var localsearch = new BMap.localSearch(map, options); 得到網點資訊
* localsearch.search() 或者 localsearch.Nearby() 搜尋附近的網點.
這樣直接用api預設函數得到的結果:
* 百度把所有的功能給你做好了, 傻瓜式操作
* 傳回的資料非常少, 自定義字段沒有, 網點距離沒有….
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 建立地圖執行個體
var point = new BMap.Point(, ); // 建立點坐标
{# 獲得使用者位置 #}
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
{# 一會要用到point , point重新指派為目前地圖的中心#}
point = r.point;
var options = {
onSearchComplete: function(results) {
{# alert('Search Completed');#}
//可添加自定義回調函數
console.log(results);
{# 在這裡可以拿到查詢到的資料#}
results.vr.forEach(function (a) {
var dis = (map.getDistance(point, a.point)/).toFixed();
a.distance = dis;
});
var vr = results.vr;
{# 按照距離排序#}
vr.sort(function (a, b) {
var cmp = parseFloat(a.distance) >parseFloat(b.distance) ? :-;
console.log(cmp);
return cmp;
});
console.log(results);
showYYBData(vr[]);
},
renderOptions: {
map: map,
{# autoViewport: true // 檢索完成後自動縮放#}
},
pageCapacity:
};
// ****從伺服器平台檢索出來資料******
var localSearch = new BMap.LocalSearch(map, options);
map.addEventListener("load", function() {
var circle = new BMap.Circle(point, , {
fillColor: "blue",
strokeWeight: ,
fillOpacity: ,
strokeOpacity:
});
// 搜尋附近的網點
localSearch.searchNearby('廁所', point, , {
customData: {
geotableId: 前面上傳資料的tableID
}
});
});
map.centerAndZoom(point, ); // 初始化地圖，設定中心點坐标和地圖級别
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl()); //添加預設縮放平移控
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否開啟繪制模式
});
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true});
{# 填寫營業部資訊#}
function showYYBData(yybData) {
$('#yybName').text(yybData.title);
$('#yybAddr').text('位址: ' + yybData.address);
$('#yybDis').text('距離: ' + yybData.distance + '千米');
$('#yybPhone').text('電話: ' + yybData.phone);
}
</script>
顯示資料很有限, 就兩條.效果很不理想:
可以看出 localsearch 傳回的資料本來就有限
前面的方法效果不好
- 下面改為 使用ajax 請求資料, 這樣傳回的資料就非常全, 然後再自己添加到百度地圖
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 建立地圖執行個體
var point = new BMap.Point(, ); // 建立點坐标
{# 獲得使用者位置 #}
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.disableDragging(); // 禁止拖拽
map.panTo(r.point);
{# 一會要用到point , point重新指派為目前地圖的中心#}
point = r.point;
var search_url = 'http://api.map.baidu.com/geosearch/v3/nearby?ak=你的ak&geotable_id=你的tableID&location=' +
point.lng +','+ point.lat +
'&page_size=5&radius=50000&tags=搜尋關鍵字&sortby=distance:1';
{# 這裡使用ajax請求資料#}
$.ajax({url:search_url,
dataType: 'jsonp',
success:function (r) {
console.log(r);
if (r.status == '0'){
var isFirst = ;
r.contents.forEach(function (t){
console.log(t.location);
var wd = new BMap.Marker(new BMap.Point(t.location[],t.location[]));
wd.customData = {
title: t.title,
address: t.address,
phone: t.phone == undefined? '無':t.phone, //營業部電話
distance: t.distance,
province: t.province,
city: t.city,
district: t.district,
yyb: t.title,
};
wd.addEventListener("click", addWindow);
map.addOverlay(wd);
if (isFirst == ){
// 如果是第一個, 也就是最近的網點, 預設選中, 打開彈窗
isFirst +=;
showYYBData(wd.customData);
var infoWindow = makeInfoWindow(wd);
map.openInfoWindow(infoWindow,wd.point);//打開資訊視窗
{# 儲存最近網點資訊, 送出表單一并送出#}
wd.customData.platform = navigator.platform; //使用者平台資訊
window.closest_info = wd.customData;
}
console.log(wd);
})
}
map.centerAndZoom(point, ); // 初始化地圖，設定中心點坐标和地圖級别
map.enableScrollWheelZoom();
}
})
}
else {
alert('請允許我們獲得您的位置資訊, 以便幫您查找最近的網點.');
}
},{enableHighAccuracy: true});
{# 填寫營業部資訊#}
function showYYBData(yybData) {
$('#yybName').text(yybData.title);
$('#yybAddr').text('位址: ' + yybData.address);
$('#yybDis').text('距離: ' + parseFloat(yybData.distance)/ + '千米');
$('#yybPhone').text('電話: ' + yybData.phone);
}
// 設定彈窗寬度
var infoOpt = {
width:
};
function addWindow(e) {
// 點選彈窗
this.openInfoWindow(new BMap.InfoWindow('<div>名稱: ' + this.customData.title + '</div>\n\t' +
'<div>位址: '+ this.customData.address +'</div>\n\t' +
'<div>距離: '+ parseFloat(this.customData.distance)/ + ' 千米</div>\n\t' +
'<div>電話: '+ this.customData.phone +'</div>'), infoOpt)
}
function makeInfoWindow(obj) {
// 初始化一個最近網點, 預設中, 彈窗
return new BMap.InfoWindow('<div>名稱: ' + obj.customData.title + '</div>\n\t' +
'<div>位址: '+ obj.customData.address +'</div>\n\t' +
'<div>距離: '+ parseFloat(obj.customData.distance)/ + ' 千米</div>\n\t' +
'<div>電話: '+ obj.customData.phone +'</div>', infoOpt)
}
<script>