629 lines
26 KiB
HTML
Executable File
629 lines
26 KiB
HTML
Executable File
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<base href="/servicecity/">
|
|
<meta charset="UTF-8"/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=11,chrome=1"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
|
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
|
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
|
<style>
|
|
.area-select-item {width: 100%; margin-bottom: 15px;}
|
|
.site-dir li {
|
|
line-height: 30px;
|
|
overflow: visible;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layui-fluid layui-anim layui-anim-fadein">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-lg2 layui-col-md2 layui-col-sm-2 layui-col-xs12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body" id="areaConfigBox" style="overflow-x: hidden;overflow-y: auto;height: 605px;line-height:27px;">
|
|
<ul style="display: block;" id="nav" lay-filter="leftMenu">
|
|
<li lay-unselect style="margin-left: 29%;">当前人员<button type="button" id="resetMapBtn" class="layui-btn layui-btn-xs">重置</button></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-lg10 layui-col-md10 layui-col-sm-10 layui-col-xs12">
|
|
<div class="layui-card">
|
|
<div class="test-table-reload-btn" style="margin-bottom: -7px;padding: 15px;">
|
|
<div class="layui-inline">
|
|
<input type="text" id="keywords" class="layui-input search-item" placeholder="输入姓名">
|
|
</div>
|
|
<div class="layui-inline">
|
|
<input type="text" id="startTime" class="layui-input search-item" placeholder="开始时间" readonly>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<input type="text" id="endTime" class="layui-input search-item" placeholder="结束时间" readonly>
|
|
</div>
|
|
<button type="button" id="search" class="layui-btn layui-btn-sm">
|
|
<i class="fa fa-lg fa-search"></i> 搜索
|
|
</button>
|
|
<button type="button" id="refresh" class="layui-btn layui-btn-sm">
|
|
<i class="layui-icon layui-icon-refresh-3"></i>
|
|
</button>
|
|
</div>
|
|
<div style="padding:5px;border:1px solid silver;background-color:#FFF;position:fixed;top:78px;right:31px;z-index:10000;">
|
|
<span>经度: <i id="lng"></i></span>,
|
|
<span>纬度: <i id="lat"></i></span>
|
|
</div>
|
|
<div class="layui-card-body" id="areaMapBox">
|
|
<div id="mapContainer" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=pFMM3KjMlPlpzEGTXwB5vdj6cDCfB6Py"></script>
|
|
<script src="assets/layuiadmin/layui/layui.js"></script>
|
|
<script type="text/javascript" src="assets/js/baidu-map-0.0.1.min.js"></script>
|
|
<script type="text/javascript">
|
|
layui.config({
|
|
base: 'assets/layuiadmin/'
|
|
}).extend({
|
|
index: 'lib/index'
|
|
}).use(['index', 'table', 'laydate', 'ztree', 'element'], function() {
|
|
var $ = layui.$;
|
|
var $win = $(window);
|
|
var table = layui.table;
|
|
var admin = layui.admin;
|
|
var laydate = layui.laydate;
|
|
var element = layui.element;
|
|
var map = null;
|
|
var lng = 0;
|
|
var lat = 0;
|
|
var isLoad = true;
|
|
var markUserPoints = [];
|
|
var baseAreas = [];
|
|
var keywords = null;
|
|
var date = null;
|
|
var startTime = null;
|
|
var endTime = null;
|
|
|
|
function init(){
|
|
resizePage();
|
|
initDate();
|
|
}
|
|
init();
|
|
|
|
// 初始化高度
|
|
function resizePage() {
|
|
$('#areaConfigBox').css({
|
|
height: ($win.height() - 50) +'px'
|
|
});
|
|
$('#areaMapBox').css({
|
|
height: ($win.height() - 103) + 'px'
|
|
});
|
|
}
|
|
|
|
// 初始化日期
|
|
function initDate() {
|
|
// 日期选择
|
|
laydate.render({
|
|
elem: '#startTime',
|
|
type: 'time',
|
|
done: function(value, date, endDate){
|
|
startTime = value;
|
|
}
|
|
});
|
|
laydate.render({
|
|
elem: '#endTime',
|
|
type: 'time',
|
|
done: function(value, date, endDate){
|
|
endTime = value;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 事件 - 重新加载
|
|
$(document).on('click', '#refresh', function() {
|
|
window.location.reload();
|
|
});
|
|
|
|
// 事件 - 搜索
|
|
$(document).on('click', '#search', function() {
|
|
search();
|
|
});
|
|
|
|
function search() {
|
|
isLoad = true;
|
|
initUserCurrentPoint();
|
|
}
|
|
|
|
// 监听-页面变化
|
|
window.onresize = function(){
|
|
window.location.reload();
|
|
};
|
|
|
|
// 开始摇人
|
|
function initUserCurrentPoint() {
|
|
var keywords = $('#keywords').val();
|
|
var startTime = $('#startTime').val();
|
|
var endTime = $('#endTime').val();
|
|
var params = {
|
|
keywords : encodeURI(keywords),
|
|
startTime : startTime,
|
|
endTime : endTime,
|
|
};
|
|
// 清空用户点列表
|
|
markUserPoints.splice(0, markUserPoints.length);
|
|
top.restAjax.get(top.restAjax.path('api/userlocation/listonlineuserlastlocation', []), params, null, function(code, data) {
|
|
// 清空地图
|
|
map.clearMap();
|
|
takeBaseArea();
|
|
var users = [];
|
|
var userIds = [];
|
|
var points = [];
|
|
for(var i = 0, item = data[i]; item = data[i++];) {
|
|
points.push({
|
|
lng: item.userLongitude,
|
|
lat: item.userLatitude
|
|
});
|
|
users.push({
|
|
valueField: item.creator,
|
|
textField: item.userName,
|
|
sign: item.sign,
|
|
lng: item.userLongitude,
|
|
lat: item.userLatitude
|
|
});
|
|
userIds.push(item.creator);
|
|
var userAvatarMark = markWithUserAvatarAndUserName(map, new BMap.Point(item.userLongitude, item.userLatitude), {
|
|
id: item.creator,
|
|
name: item.userName,
|
|
phone: item.userPhone,
|
|
avatar: item.userAvatar,
|
|
}, '时间：'+ item.gmtCreate, function(data) {
|
|
openUserLocus(data);
|
|
})
|
|
markUserPoints.push({
|
|
userId: item.creator,
|
|
markPoint: userAvatarMark
|
|
});
|
|
}
|
|
for(var i = 0, item = markUserPoints[i]; item = markUserPoints[i++];) {
|
|
map.map.addOverlay(item.markPoint);
|
|
}
|
|
initUserArea(userIds, points);
|
|
initLeftMenu(data);
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
});
|
|
}
|
|
|
|
// 初始化当前人员列表
|
|
function initLeftMenu(data) {
|
|
$("#nav").find('li.layui-nav-item').remove();
|
|
$.each(data, function (index, value) {
|
|
var textField = data[index]['userName'];
|
|
var valueField = data[index]['creator'];
|
|
var lng = data[index]['userLongitude'];
|
|
var lat = data[index]['userLatitude'];
|
|
textField = textFormatter(textField, data[index], index);
|
|
var $li = $("<li class='layui-nav-item' style='cursor: pointer;' data-textField='"+textField+"' data-field='"+valueField+"' data-lng='"+lng+"' data-lat='"+lat+"'>" + textField + "</li>");
|
|
$("#nav").append($li);
|
|
})
|
|
//列表添加完后再次执行渲染
|
|
loadLeftMenu();
|
|
}
|
|
|
|
// 当前人员列表渲染
|
|
function loadLeftMenu() {
|
|
var layFilter = $("#nav").attr('lay-filter');
|
|
element.render('nav', layFilter);
|
|
}
|
|
|
|
|
|
$('body').on('click', 'li.layui-nav-item', function() {
|
|
var valueField = this.dataset.field;
|
|
var lng = this.dataset.lng;
|
|
var lat = this.dataset.lat;
|
|
onClickRow(valueField, lng, lat)
|
|
})
|
|
|
|
function openUserLocus(data) {
|
|
top.dialog.open({
|
|
url: top.restAjax.path('route/userlocation/map_userlocus.html?userId={id}&date={date}&startTime={startTime}&endTime={endTime}', [data.id, (date == null ? '' : date), (startTime == null ? '' : startTime), (endTime == null ? '' : endTime)]),
|
|
title: data.name +'当前轨迹',
|
|
width: '800px',
|
|
height: '600px',
|
|
onClose: function() {}
|
|
})
|
|
}
|
|
|
|
// 添加标签
|
|
function addAreaLabel(content, lng, lat) {
|
|
var label = new BMap.Label('<div>' + content + '</div>', {
|
|
position: new BMap.Point(lng, lat),
|
|
offset: new BMap.Size(-content.length * 6, -10)
|
|
});
|
|
label.setStyle({
|
|
backgroundColor: 'none',
|
|
border: 'none',
|
|
color: 'black',
|
|
fontSize: '12px',
|
|
height: '20px',
|
|
lineHeight: '20px',
|
|
textShadow: '0 0 5px #FFF',
|
|
fontWeight: 'bold'
|
|
});
|
|
map.map.addOverlay(label);
|
|
}
|
|
|
|
function drawArea(polygonAreas) {
|
|
for(var i = 0, item = polygonAreas[i]; item = polygonAreas[i++];) {
|
|
map.map.addOverlay(item);
|
|
}
|
|
}
|
|
|
|
// 初始化人员区域
|
|
function initUserArea(userIds, allPoints) {
|
|
if(userIds.length > 0) {
|
|
var ids = '';
|
|
for(var i = 0, item = userIds[i]; item = userIds[i++];) {
|
|
if(ids != '') {
|
|
ids += ',';
|
|
}
|
|
ids += item;
|
|
}
|
|
top.restAjax.post(top.restAjax.path('api/userpoints/listuserandpointsbyuseridsbygridservice', []), {
|
|
userIds: ids
|
|
}, null, function(code, data) {
|
|
var polygonAreas = [];
|
|
for(var i = 0, points = data[i]; points = data[i++];) {
|
|
var pointArray = [];
|
|
for (var j = 0, item = points.pointArray[j]; item = points.pointArray[j++];) {
|
|
allPoints.push({
|
|
lng: item.lng,
|
|
lat: item.lat
|
|
})
|
|
pointArray.push(new BaiduMap.Point(item.lng, item.lat));
|
|
}
|
|
// 展示默认背景
|
|
map.initBackgroundGrid({
|
|
gridArray: [
|
|
{
|
|
id: points.gridId,
|
|
label: points.gridName,
|
|
fillColor: points.fillColor,
|
|
pointArray: pointArray
|
|
}
|
|
]
|
|
});
|
|
addAreaLabel(points.gridName, points.lng, points.lat);
|
|
}
|
|
if(isLoad) {
|
|
isLoad = false;
|
|
// addBasePoint(allPoints);
|
|
map.map.setViewport(allPoints);
|
|
}
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
});
|
|
} else {
|
|
if(isLoad) {
|
|
isLoad = false;
|
|
// addBasePoint(allPoints);
|
|
map.map.setViewport(allPoints);
|
|
}
|
|
}
|
|
}
|
|
|
|
function textFormatter(value, row, index) {
|
|
value = (index + 1) +'.' + value;
|
|
if(row.leave) {
|
|
value += '【已请假】';
|
|
} else {
|
|
value += '【'+ (row.sign ? '已签到' : '未签到') +'】';
|
|
}
|
|
return value;
|
|
}
|
|
|
|
function onClickRow(valueField, lng, lat) {
|
|
for(var i = 0, item = markUserPoints[i]; item = markUserPoints[i++];) {
|
|
if(item.userId == valueField) {
|
|
item.markPoint.setFocus();
|
|
map.map.setCenter(new BMap.Point(lng, lat));
|
|
var param = {
|
|
id : item.userId,
|
|
name : item.markPoint.user.name
|
|
}
|
|
setTimeout(function() {
|
|
openUserLocus(param);
|
|
}, 500)
|
|
} else {
|
|
item.markPoint.hide();
|
|
}
|
|
}
|
|
}
|
|
|
|
$(document).on('click', '#resetMapBtn', function() {
|
|
for(var i = 0, item = markUserPoints[i]; item = markUserPoints[i++];) {
|
|
item.markPoint.show();
|
|
}
|
|
});
|
|
|
|
function initMap() {
|
|
top.restAjax.get(top.restAjax.path('api/config/getmapinit', []), {}, null, function(code, data) {
|
|
// 初始化基础片区
|
|
if(typeof(data.areaPoints) != 'undefined' && data.areaPoints != null && data.areaPoints != '') {
|
|
var areaPoints = data.areaPoints.split('$');
|
|
for(var i = 0; i < areaPoints.length; i++) {
|
|
var item = areaPoints[i];
|
|
var points = item.split(';');
|
|
var pointArray = [];
|
|
for(var j = 0; j < points.length; j++) {
|
|
var point = points[j].split(',');
|
|
pointArray.push({
|
|
lng: point[0],
|
|
lat: point[1]
|
|
})
|
|
}
|
|
baseAreas.push({
|
|
id: i,
|
|
name: null,
|
|
points: pointArray
|
|
})
|
|
}
|
|
}
|
|
// 初始化地图
|
|
map = new BaiduMap('mapContainer', {
|
|
onMouseMove: function(e) {
|
|
$('#lng').text(e.point.lng);
|
|
$('#lat').text(e.point.lat);
|
|
}
|
|
});
|
|
map.setCenterAndZoom({
|
|
lng: data.mapLng,
|
|
lat: data.mapLat
|
|
}, data.mapZoom);
|
|
// 必须
|
|
map.setDefaultConfig();
|
|
map.map.addEventListener('mousemove', function (e) {
|
|
$('#lng').text(e.point.lng);
|
|
$('#lat').text(e.point.lat);
|
|
});
|
|
setTimeout(function() {
|
|
initUserCurrentPoint();
|
|
}, 1000)
|
|
setInterval(function() {
|
|
initUserCurrentPoint();
|
|
}, 300000);
|
|
}, function(code,data) {
|
|
top.dialog.msg(data.msg);
|
|
});
|
|
}
|
|
|
|
// 划基础区域片
|
|
function takeBaseArea() {
|
|
for(var i = 0, points = baseAreas[i]; points = baseAreas[i++];) {
|
|
var pointArray = [];
|
|
for (var j = 0, item = points.points[j]; item = points.points[j++];) {
|
|
pointArray.push(new BMap.Point(item.lng, item.lat));
|
|
}
|
|
var polygonArea = new BMap.Polygon(pointArray, {
|
|
strokeColor: 'rgb(0,0,0)',
|
|
strokeWeight: 1,
|
|
strokeOpacity: 1,
|
|
});
|
|
polygonArea.setFillColor('none');
|
|
map.map.addOverlay(polygonArea);
|
|
}
|
|
}
|
|
|
|
// 添加基础节点
|
|
function addBasePoint(points) {
|
|
for(var i = 0, item = baseAreas[i]; item = baseAreas[i++];) {
|
|
for(var j = 0, point = item.points[j]; point = item.points[j++];) {
|
|
points.push({
|
|
lng: point.lng,
|
|
lat: point.lat
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
function formatterDate(date) {
|
|
var year = date.getFullYear();
|
|
var month = date.getMonth() + 1;
|
|
var day = date.getDate();
|
|
month = month >= 10 ? month : ('0'+ month);
|
|
day = day >= 10 ? day : ('0'+ day);
|
|
return year +'-'+ month +'-'+ day;
|
|
}
|
|
|
|
top.Mask.hideMask();
|
|
|
|
initMap();
|
|
|
|
|
|
/**
|
|
* 标记用户，包括头像，用户名等
|
|
*/
|
|
function markWithUserAvatarAndUserName(map, point, user, explainText, callback) {
|
|
|
|
function UserAvatarAndUserName(map, point, user, explainText) {
|
|
this.baiduMap = map;
|
|
this.point = point;
|
|
this.user = user;
|
|
this.explainText = explainText;
|
|
this.isFocus = false;
|
|
}
|
|
|
|
UserAvatarAndUserName.prototype = new BMap.Overlay();
|
|
UserAvatarAndUserName.prototype.focusStyle = function() {
|
|
var self = this;
|
|
var userInfoBox = self.userInfoBox;
|
|
userInfoBox.oldZIndex = userInfoBox.style.zIndex;
|
|
userInfoBox.style.zIndex = '10000';
|
|
userInfoBox.style.cursor = 'pointer';
|
|
userInfoBox.style.width = '24px';
|
|
userInfoBox.style.height = '24px';
|
|
userInfoBox.style.top = (parseInt(userInfoBox.style.top.substring(0, userInfoBox.style.top.length - 2))) +'px';
|
|
self.arrow.style.top = (parseInt(self.arrow.style.top.substring(0, self.arrow.style.top.length - 2))) +'px';
|
|
self.arrowBottomBig.style.top = (parseInt(self.arrowBottomBig.style.top.substring(0, self.arrowBottomBig.style.top.length - 2)) + 15) +'px';
|
|
// self.userExplainText.style.display = 'block';
|
|
};
|
|
UserAvatarAndUserName.prototype.unFocusStyle = function() {
|
|
var self = this;
|
|
var userInfoBox = self.userInfoBox;
|
|
userInfoBox.style.zIndex = userInfoBox.oldZIndex;
|
|
userInfoBox.style.backgroundColor = 'green';
|
|
userInfoBox.style.cursor = 'grab';
|
|
userInfoBox.style.width = '24px';
|
|
userInfoBox.style.height = '24px';
|
|
userInfoBox.style.top = (parseInt(userInfoBox.style.top.substring(0, userInfoBox.style.top.length - 2))) +'px';
|
|
self.arrow.style.top = (parseInt(self.arrow.style.top.substring(0, self.arrow.style.top.length - 2))) +'px';
|
|
self.arrowBottomBig.style.top = (parseInt(self.arrowBottomBig.style.top.substring(0, self.arrowBottomBig.style.top.length - 2)) - 15) +'px';
|
|
// self.userExplainText.style.display = 'none';
|
|
};
|
|
UserAvatarAndUserName.prototype.initialize = function () {
|
|
var self = this;
|
|
var userInfoBox = this.userInfoBox = document.createElement('div');
|
|
userInfoBox.style.position = 'absolute';
|
|
userInfoBox.style.zIndex = BMap.Overlay.getZIndex(this.point.lat);
|
|
userInfoBox.style.backgroundColor = 'green';
|
|
userInfoBox.style.border = '1px solid white';
|
|
userInfoBox.style.width = '24px';
|
|
userInfoBox.style.height = '24px';
|
|
userInfoBox.style.borderRadius = '12px';
|
|
|
|
var userAvatar = this.userAvatar = document.createElement('img');
|
|
userAvatar.style.width = '20px';
|
|
userAvatar.style.height = '20px';
|
|
userAvatar.style.margin = '2px';
|
|
userAvatar.style.backgroundColor = 'white';
|
|
userAvatar.style.borderRadius = '12px';
|
|
if (user.avatar == '') {
|
|
userAvatar.setAttribute('src', 'assets/images/profile-photo.jpg');
|
|
} else {
|
|
userAvatar.setAttribute('src', 'route/file/downloadfile/true/' + user.avatar);
|
|
}
|
|
userAvatar.onclick = function(e) {
|
|
top.dialog.open({
|
|
url: top.restAjax.path('route/userlocation/get-user-detail.html?userId={userId}', [self.user.id]),
|
|
title: '人员详情',
|
|
width: '400px',
|
|
height: '365px',
|
|
onClose: function() {}
|
|
})
|
|
window.event? window.event.cancelBubble = true : e.stopPropagation();
|
|
}
|
|
userInfoBox.appendChild(userAvatar);
|
|
|
|
// var infoBox = this.infoBox = document.createElement('div');
|
|
// infoBox.setAttribute('class', 'info-box');
|
|
// infoBox.style.display = 'inline-block';
|
|
// infoBox.style.verticalAlign = 'middle';
|
|
// infoBox.style.color = 'white';
|
|
// infoBox.style.width = '65%';
|
|
// userInfoBox.appendChild(infoBox)
|
|
|
|
// var userName = this.userName = document.createElement('span');
|
|
// userName.setAttribute('class', 'user-name');
|
|
// userName.style.display = 'block';
|
|
// userName.style.width = '100%';
|
|
// userName.style.overflow = 'hidden';
|
|
// userName.style.textOverflow = 'ellipsis';
|
|
// userName.style.whiteSpace = 'nowrap';
|
|
// userName.appendChild(document.createTextNode('姓名: ' + this.user.name));
|
|
// infoBox.appendChild(userName);
|
|
|
|
// var userPhone = this.userPhone = document.createElement('span');
|
|
// userPhone.setAttribute('class', 'user-phone');
|
|
// userPhone.style.display = 'block';
|
|
// userPhone.style.width = '100%';
|
|
// userPhone.style.overflow = 'hidden';
|
|
// userPhone.style.textOverflow = 'ellipsis';
|
|
// userPhone.style.whiteSpace = 'nowrap';
|
|
// userPhone.appendChild(document.createTextNode('电话: ' + this.user.phone));
|
|
// infoBox.appendChild(userPhone);
|
|
|
|
// var userExplainText = this.userExplainText = document.createElement('div');
|
|
// userExplainText.setAttribute('class', 'user-explain-text');
|
|
// userExplainText.style.display = 'none';
|
|
// userExplainText.style.width = '210px';
|
|
// userExplainText.appendChild(document.createTextNode(this.explainText));
|
|
// infoBox.appendChild(userExplainText);
|
|
|
|
var arrow = this.arrow = document.createElement("div");
|
|
arrow.setAttribute('class', 'arrow');
|
|
arrow.style.position = 'absolute';
|
|
arrow.style.width = '0';
|
|
arrow.style.height = '0';
|
|
arrow.style.borderWidth = '10px';
|
|
arrow.style.borderStyle = 'solid';
|
|
arrow.style.borderColor = 'green transparent transparent transparent';
|
|
arrow.style.top = '20px';
|
|
arrow.style.left = '2px';
|
|
arrow.style.overflow = 'hidden';
|
|
userInfoBox.appendChild(arrow);
|
|
|
|
var arrowBottomBig = this.arrowBottomBig = document.createElement('div');
|
|
arrowBottomBig.setAttribute('class', 'arrow-bottom-big');
|
|
arrowBottomBig.style.position = 'absolute';
|
|
arrowBottomBig.style.width = '30px';
|
|
arrowBottomBig.style.height = '12px';
|
|
arrowBottomBig.style.margin = '0';
|
|
arrowBottomBig.style.border = '1px solid green';
|
|
arrowBottomBig.style.borderRadius = '50% / 50%';
|
|
arrowBottomBig.style.top = '22px';
|
|
arrowBottomBig.style.left = '-4px';
|
|
userInfoBox.appendChild(arrowBottomBig);
|
|
|
|
var arrowBottomSmall = this.arrowBottomSmall = document.createElement('div');
|
|
arrowBottomSmall.setAttribute('class', 'arrow-bottom-small');
|
|
arrowBottomSmall.style.width = '20px';
|
|
arrowBottomSmall.style.height = '8px';
|
|
arrowBottomSmall.style.margin = '1px 4px 0 4px';
|
|
arrowBottomSmall.style.border = '1px solid green';
|
|
arrowBottomSmall.style.borderRadius = '50% / 50%';
|
|
arrowBottomBig.appendChild(arrowBottomSmall);
|
|
|
|
userInfoBox.onmouseover = function () {
|
|
if(!self.isFocus) {
|
|
self.focusStyle();
|
|
self.isFocus = true;
|
|
}
|
|
}
|
|
|
|
userInfoBox.onmouseout = function () {
|
|
if(self.isFocus) {
|
|
self.unFocusStyle();
|
|
self.isFocus = false;
|
|
}
|
|
};
|
|
|
|
userInfoBox.onclick = function (e) {
|
|
if (typeof (callback) == 'function') {
|
|
callback(user, e);
|
|
}
|
|
}
|
|
|
|
map.map.getPanes().labelPane.appendChild(userInfoBox);
|
|
return userInfoBox;
|
|
}
|
|
|
|
UserAvatarAndUserName.prototype.draw = function () {
|
|
var pixel = map.map.pointToOverlayPixel(this.point);
|
|
this.userInfoBox.style.left = pixel.x - parseInt(this.arrow.style.left) - 12 + 'px';
|
|
this.userInfoBox.style.top = pixel.y - 30 + 'px';
|
|
}
|
|
|
|
UserAvatarAndUserName.prototype.setFocus = function () {
|
|
if(!this.isFocus) {
|
|
this.focusStyle();
|
|
this.isFocus = true;
|
|
}
|
|
}
|
|
|
|
return new UserAvatarAndUserName(map, point, user, explainText);
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |