前面记录了怎么上传自定义数据, 下面说一下怎么展示数据.
其实百度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>