实现效果如图:
大致思路就是
1.先创建一个地图:
var map = new BMap.Map("map"); // 创建Map实例
var point = new BMap.Point(116.3917276223, 39.1251928282); //地图中心点
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(true); //启用滚轮放大缩小
//向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
2.利用ajax返回数据,以此读取商家的信息,展示在地图上
function shangjia(){
$.getJSON('http://localhost/baidumap/js/shop.php',function(data){
var markerArr = [];
var shopL = data.length;
for (var g=0;g<shopL;g++) {
var shopJson = {
title:data[g].name,
point:data[g].jing + ',' + data[g].wei,
order:data[g].danshu,
id:data[g].id
}
markerArr.push(shopJson);
}
var point = new Array(); //存放标注点经纬信息的数组
var marker = new Array(); //存放标注点对象的数组
var info = new Array(); //存放提示信息窗口对象的数组
$.each(markerArr, function(i,v) {
var id = v.id;//商家id
//alert(id[i])
var p0 = v.point.split(",")[0]; //
var p1 = v.point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
var name = v.title;
point = new window.BMap.Point(p0, p1); //循环生成新的地图点
var myIcon = new BMap.Icon("img/shop_icon@2x.png", new BMap.Size(50,50));
marker = new window.BMap.Marker(point); //按照地图点坐标生成标记
marker = new BMap.Marker(point,{icon:myIcon}); // 创建标注
//marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
var label = new window.BMap.Label(v.title + ':' + v.order, { offset: new window.BMap.Size(20, -10) });
marker.setLabel(label);
map.addOverlay(marker);
marker.addEventListener("click",getAttr);
});
});
//派单函数
}
3.同样的方法遍历骑手的信息,展示在地图上。
4.设置每五秒重新加载并展示信息以此