<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
<style type="text/css">
|
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
|
</style>
|
<script type="text/javascript" src="${ctxPath}/plugins/jquery/jquery.min.js?v=${jsVer}"></script>
|
<script type="text/javascript" src="${ctxPath}/js/common.js?v=${jsVer}"></script>
|
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=E4805d16520de693a3fe707cdc962045"></script>
|
<title>地图展示</title>
|
<style>
|
.anchorBL{
|
display:none;
|
}
|
#menu{
|
font-size: 18px;
|
font-weight: bold;
|
}
|
#menu li{
|
text-decoration: none; /*去掉前面的圆点*/
|
list-style: none;
|
float: left;
|
border: 1px solid #FFFFFF;
|
background-color: #30DDEB;
|
}
|
</style>
|
</head>
|
<body>
|
<div id="allmap" style="height: 70%"></div>
|
<ul id="menu">
|
<li><span>收集客户:<span id="x1"></span></span></li>
|
<li><span>累计客户:<span id="x2"></span></span></li>
|
<li><span>已成交客户:<span id="x3"></span></span></li>
|
<li><span>未成交客户:<span id="x4"></span></span></li>
|
</ul>
|
|
|
|
|
</body>
|
</html>
|
<script type="text/javascript">
|
// 百度地图API功能
|
var map = new BMap.Map("allmap"); // 创建Map实例
|
map.centerAndZoom(new BMap.Point(113.0118744975,28.0585161545), 11); // 初始化地图,设置中心点坐标和地图级别
|
//添加地图类型控件
|
map.addControl(new BMap.MapTypeControl({
|
mapTypes:[
|
BMAP_NORMAL_MAP,
|
BMAP_HYBRID_MAP
|
]}));
|
map.setCurrentCity("长沙"); // 设置地图显示的城市 此项是必须设置的
|
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
|
|
|
|
</script>
|
<script>
|
$.post(Common.ctxPath+ '/admin/statis/customer/queryLatAndLong.json', {}, function (data) {
|
console.log(data.data);
|
if (document.createElement('canvas').getContext) { // 判断当前浏览器是否支持绘制海量点
|
//var points = []; // 添加海量点数据
|
var pointsRed = []; // 已成交
|
var pointsOrange = []; // 未成交
|
var pointsBlue = []; // 未注册
|
var y3 = 0, y4 = 0;
|
for (var i = 0; i < data.data.length; i++) {
|
var point=new BMap.Point(data.data[i].longitude , data.data[i].latitude);
|
point.nickName = data.data[i].nickName;
|
point.orderStatus = data.data[i].orderStatus;
|
if(data.data[i].orderStatus == 5){
|
pointsRed.push(point);
|
y3++;
|
}else{
|
pointsOrange.push(point);
|
y4++;
|
}
|
}
|
$("#x3").html(y3);
|
$("#x4").html(y4);
|
$("#x2").html(y4+y3);
|
var optionsRed = {
|
size: BMAP_POINT_SIZE_HUGE,
|
shape: BMAP_POINT_SHAPE_STAR,
|
color: '#d340c3'
|
}
|
var optionsOrange = {
|
size: BMAP_POINT_SIZE_HUGE,
|
shape: BMAP_POINT_SHAPE_STAR,
|
color: '#abcdef'
|
}
|
var pointCollection = new BMap.PointCollection(pointsRed, optionsRed); // 初始化PointCollection
|
var pointCollectionOrange = new BMap.PointCollection(pointsOrange, optionsOrange); // 初始化PointCollection
|
var opts = {
|
width : 200, // 信息窗口宽度
|
height: 100, // 信息窗口高度
|
title : "海底捞王府井店" , // 信息窗口标题
|
enableMessage:true,//设置允许信息窗发送短息
|
message:"lalalalalalalala~"
|
}
|
|
pointCollection.addEventListener('click', function (e) {
|
console.log(e);
|
var infoWindow = new BMap.InfoWindow("姓名:" + e.point.nickName, opts); // 创建信息窗口对象
|
//alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat); // 监听点击事件
|
map.openInfoWindow(infoWindow, new BMap.Point(e.point.lng,e.point.lat)); //开启信息窗口
|
});
|
pointCollectionOrange.addEventListener('click', function (e) {
|
console.log(e);
|
var infoWindow = new BMap.InfoWindow("姓名:" + e.point.nickName, opts); // 创建信息窗口对象
|
//alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat); // 监听点击事件
|
map.openInfoWindow(infoWindow, new BMap.Point(e.point.lng,e.point.lat)); //开启信息窗口
|
});
|
map.addOverlay(pointCollectionOrange); // 添加Overlay
|
map.addOverlay(pointCollection); // 添加Overlay
|
} else {
|
alert('请在chrome、safari、IE8+以上浏览器查看本示例');
|
}
|
})
|
|
</script>
|
