667 lines
25 KiB
JavaScript
667 lines
25 KiB
JavaScript
function BaiduMap(option) {
|
|
var baiduMap;
|
|
|
|
/**
|
|
* 重置视野
|
|
* @param points
|
|
*/
|
|
function resetViewport(points) {
|
|
baiduMap.setViewport(points);
|
|
}
|
|
|
|
/**
|
|
* 清空地图
|
|
*/
|
|
function clearMap() {
|
|
baiduMap.clearOverlays();
|
|
}
|
|
|
|
/**
|
|
* 删除覆盖物
|
|
* @param id id
|
|
*/
|
|
function removeItem(id) {
|
|
var allOverlays = baiduMap.getOverlays();
|
|
for (var i = 0, item = allOverlays[i]; item = allOverlays[i++];) {
|
|
if (item.getTitle && item.getTitle().indexOf(id) != -1) {
|
|
baiduMap.removeOverlay(item);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 删除覆盖物
|
|
* @param overlay
|
|
*/
|
|
function removeOverlay(overlay) {
|
|
baiduMap.removeOverlay(overlay);
|
|
}
|
|
|
|
/**
|
|
* 获取中心点
|
|
* @param areaPoints 数组
|
|
* @returns {{lng: number, lat: number}}
|
|
*/
|
|
function getCenterPoint(areaPoints) {
|
|
var xPoints = [];
|
|
var yPoints = [];
|
|
for (var i = 0, item = areaPoints[i]; item = areaPoints[i++];) {
|
|
xPoints.push(item.lng);
|
|
yPoints.push(item.lat);
|
|
}
|
|
// 排序
|
|
xPoints = xPoints.sort();
|
|
yPoints = yPoints.sort();
|
|
var minX = parseFloat(xPoints[0]);
|
|
var maxX = parseFloat(xPoints[xPoints.length - 1]);
|
|
var minY = parseFloat(yPoints[0]);
|
|
var maxY = parseFloat(yPoints[yPoints.length - 1]);
|
|
return {
|
|
lng: (minX + ((maxX - minX) / 2)),
|
|
lat: (minY + ((maxY - minY) / 2))
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 添加标签
|
|
* @param labelTitle 标题
|
|
* @param labelContent 内容
|
|
* @param areaPoints 点集合
|
|
*/
|
|
function addLabel(labelTitle, labelContent, areaPoints, center, onLabelClick) {
|
|
if (typeof (labelContent) != 'undefined' && labelContent != null) {
|
|
var centerPoint;
|
|
if (typeof(center) == 'undefined' || center == null || (center.lng == null || center.lng == '') || (center.lat == null || center.lat == '')) {
|
|
centerPoint = getCenterPoint(areaPoints);
|
|
} else {
|
|
centerPoint = center;
|
|
}
|
|
var label = new BMap.Label('<div>' + labelContent + '</div>', {
|
|
position: new BMap.Point(centerPoint.lng, centerPoint.lat),
|
|
offset: new BMap.Size(-labelContent.length * 6, -10)
|
|
});
|
|
label.setTitle('Label' + labelTitle);
|
|
label.setStyle({
|
|
backgroundColor: 'none',
|
|
border: 'none',
|
|
color: 'black',
|
|
fontSize: '12px',
|
|
height: '20px',
|
|
lineHeight: '20px',
|
|
textShadow: '0 0 5px #FFF',
|
|
fontWeight: 'bold',
|
|
cursor: 'pointer'
|
|
});
|
|
baiduMap.addOverlay(label);
|
|
if(typeof(onLabelClick) != 'undefined' || onLabelClick != null) {
|
|
label.addEventListener('click', function(e) {
|
|
onLabelClick(labelTitle, e, this);
|
|
});
|
|
}
|
|
return {
|
|
lng: centerPoint.lng,
|
|
lat: centerPoint.lat
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 划片
|
|
* @param option = {
|
|
* id: '',
|
|
* label: '',
|
|
* isBold: false,
|
|
* color: {
|
|
* border: {
|
|
* red: 0,
|
|
* green: 0,
|
|
* blue: 0
|
|
* },
|
|
* area: {
|
|
* red: 0,
|
|
* green: 0,
|
|
* blue: 0
|
|
* }
|
|
* },
|
|
* pointArray: [{
|
|
* lng: 0,
|
|
* lat: 0
|
|
* }],
|
|
* onClick: function(id, e) {}
|
|
* onDblClick: function(id, e) {}
|
|
* onLineUpdate: function(id, e) {}
|
|
* }
|
|
*/
|
|
function drawArea(option) {
|
|
var pointArray = [];
|
|
for (var i = 0, item = option.pointArray[i]; item = option.pointArray[i++];) {
|
|
pointArray.push(new BMap.Point(item.lng, item.lat));
|
|
}
|
|
// 划片
|
|
var polygonArea = new BMap.Polygon(pointArray, {
|
|
strokeColor: 'rgb(' + option.color.border.red + ',' + option.color.border.green + ',' + option.color.border.blue + ')',
|
|
strokeWeight: typeof (option.isBold) != 'undefined' && (option.isBold == true || option.isBold == 'true') ? 5 : 1,
|
|
strokeOpacity: (typeof(option.color.border.opacity) != 'undefined' && option.color.border.opacity != null) ? option.color.border.opacity : 0.5,
|
|
fillColor: 'rgb(' + option.color.area.red + ',' + option.color.area.green + ',' + option.color.area.blue + ')',
|
|
fillOpacity: (typeof(option.color.area.opacity) != 'undefined' && option.color.area.opacity != null) ? option.color.area.opacity : 0.5,
|
|
});
|
|
baiduMap.addOverlay(polygonArea);
|
|
if(typeof(option.label) != 'undefined' && option.label != null) {
|
|
addLabel(option.id, option.label, option.pointArray, option.center, option.onLabelClick);
|
|
}
|
|
polygonArea.addEventListener('click', function (e) {
|
|
if (typeof (option.onClick) === 'function') {
|
|
option.onClick(option.id, e, this);
|
|
}
|
|
});
|
|
polygonArea.addEventListener('dblclick', function (e) {
|
|
if (typeof (option.onDblClick) === 'function') {
|
|
option.onDblClick(option.id, e, this);
|
|
}
|
|
});
|
|
polygonArea.addEventListener('lineupdate', function (e) {
|
|
if (typeof (option.onLineUpdate) === 'function') {
|
|
option.onLineUpdate(option.id, e, this);
|
|
}
|
|
});
|
|
return polygonArea;
|
|
}
|
|
|
|
/**
|
|
* 添加标记
|
|
* @param option = {
|
|
* id: '',
|
|
* point: {
|
|
* lng: 0,
|
|
* lat:0
|
|
* },
|
|
* onClick: function(id, e),
|
|
* onRightClick: function(id, e) {}
|
|
* }
|
|
*/
|
|
function addMarker(option) {
|
|
var marker = new BMap.Marker(new BMap.Point(option.point.lng, option.point.lat));
|
|
marker.setTitle(option.id);
|
|
if (typeof (option.jump) != 'undefined' && (option.jump == true || option.jump == 'true')) {
|
|
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
|
|
}
|
|
baiduMap.addOverlay(marker);
|
|
marker.addEventListener('click', function (e) {
|
|
if (typeof (option.onClick) === 'function') {
|
|
option.onClick(option.id, e, this);
|
|
}
|
|
});
|
|
marker.addEventListener('rightclick', function (e) {
|
|
if (typeof (option.onRightClick) === 'function') {
|
|
option.onRightClick(option.id, e, this);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 初始化地图控件
|
|
* @param option = {
|
|
* container: '',
|
|
* initPoint: {
|
|
* lng: 0,
|
|
* lat: 0
|
|
* },
|
|
* onDblClick: function(e, this) {},
|
|
* onRightClick: function(e, this) {}
|
|
* onMouseMove: function(e, this) {}
|
|
* }
|
|
* @returns baiduMap
|
|
*/
|
|
function initMap(option) {
|
|
baiduMap = new BMap.Map(option.container, {
|
|
enableMapClick: false,
|
|
});
|
|
baiduMap.disableDoubleClickZoom();
|
|
baiduMap.enableScrollWheelZoom();
|
|
baiduMap.centerAndZoom(new BMap.Point(option.initPoint.lng, option.initPoint.lat), typeof (option.zoom) == 'undefined' ? 15 : option.zoom);
|
|
baiduMap.addControl(new BMap.NavigationControl());
|
|
baiduMap.addControl(new BMap.ScaleControl());
|
|
baiduMap.addControl(new BMap.MapTypeControl({
|
|
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
|
|
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
|
|
})
|
|
);
|
|
|
|
baiduMap.addEventListener('dblclick', function (e) {
|
|
if (typeof (option.onDblClick) === 'function') {
|
|
option.onDblClick(e, this);
|
|
}
|
|
});
|
|
baiduMap.addEventListener('rightclick', function (e) {
|
|
if (typeof (option.onRightClick) === 'function') {
|
|
option.onRightClick(e, this);
|
|
}
|
|
});
|
|
baiduMap.addEventListener('mousemove', function (e) {
|
|
if (typeof (option.onMouseMove) === 'function') {
|
|
option.onMouseMove(e, this);
|
|
}
|
|
});
|
|
}
|
|
|
|
function getBaiduMap() {
|
|
return baiduMap;
|
|
}
|
|
|
|
initMap(option);
|
|
this.getCenterPoint = getCenterPoint;
|
|
this.addMarker = addMarker;
|
|
this.drawArea = drawArea;
|
|
this.removeItem = removeItem;
|
|
this.removeOverlay = removeOverlay;
|
|
this.clearMap = clearMap;
|
|
this.addLabel = addLabel;
|
|
this.resetViewport = resetViewport;
|
|
this.getBaiduMap = getBaiduMap;
|
|
}
|
|
|
|
function markWithUserName(map, lng, lat, text, mouseoverText, user, callback) {
|
|
function ComplexCustomOverlay(point, text, mouseoverText) {
|
|
this._point = point;
|
|
this._text = text;
|
|
this._overText = mouseoverText;
|
|
}
|
|
|
|
ComplexCustomOverlay.prototype = new BMap.Overlay();
|
|
ComplexCustomOverlay.prototype.initialize = function (map) {
|
|
this._map = map;
|
|
var div = this._div = document.createElement("div");
|
|
div.style.position = 'absolute';
|
|
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
|
|
div.style.backgroundColor = '#EE5D5B';
|
|
div.style.border = '1px solid #BC3B3A';
|
|
div.style.color = 'white';
|
|
div.style.height = '22px';
|
|
div.style.padding = '0 5px';
|
|
div.style.lineHeight = '22px';
|
|
div.style.whiteSpace = 'nowrap';
|
|
div.style.borderRadius = '11px';
|
|
div.style.textAlign = 'center';
|
|
div.style.MozUserSelect = 'none';
|
|
div.style.fontSize = '12px';
|
|
var span = this._span = document.createElement("span");
|
|
div.appendChild(span);
|
|
span.appendChild(document.createTextNode(this._text));
|
|
var that = this;
|
|
var arrow = this._arrow = document.createElement("div");
|
|
arrow.style.background = "url(//map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
|
|
arrow.style.position = 'absolute';
|
|
arrow.style.width = '11px';
|
|
arrow.style.height = '10px';
|
|
arrow.style.top = '20px';
|
|
arrow.style.left = '10px';
|
|
arrow.style.overflow = 'hidden';
|
|
div.appendChild(arrow);
|
|
|
|
div.onmouseover = function () {
|
|
this.style.backgroundColor = '#6BADCA';
|
|
this.style.borderColor = "#0000ff";
|
|
this.getElementsByTagName("span")[0].innerHTML = that._overText;
|
|
this.style.cursor = 'pointer';
|
|
arrow.style.backgroundPosition = '0px -20px';
|
|
}
|
|
|
|
div.onmouseout = function () {
|
|
this.style.backgroundColor = '#EE5D5B';
|
|
this.style.borderColor = '#BC3B3A';
|
|
this.getElementsByTagName('span')[0].innerHTML = that._text;
|
|
this.style.cursor = 'grab';
|
|
arrow.style.backgroundPosition = '0px 0px';
|
|
}
|
|
|
|
div.onclick = function (e) {
|
|
callback(user, e);
|
|
}
|
|
map.getPanes().labelPane.appendChild(div);
|
|
return div;
|
|
}
|
|
ComplexCustomOverlay.prototype.draw = function () {
|
|
var map = this._map;
|
|
var pixel = map.pointToOverlayPixel(this._point);
|
|
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + 'px';
|
|
this._div.style.top = pixel.y - 30 + 'px';
|
|
}
|
|
return new ComplexCustomOverlay(new BMap.Point(lng, lat), text, mouseoverText);
|
|
}
|
|
|
|
/**
|
|
* 标记用户，包括头像，用户名等
|
|
* @param map
|
|
* @param point
|
|
* @param avatar
|
|
* @param name
|
|
* @param phone
|
|
* @param explainText
|
|
* @param user
|
|
* @param callback
|
|
* @returns {UserAvatarAndUserName}
|
|
*/
|
|
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 = '280px';
|
|
userInfoBox.style.height = '65px';
|
|
userInfoBox.style.top = (parseInt(userInfoBox.style.top.substring(0, userInfoBox.style.top.length - 2)) - 15) +'px';
|
|
self.arrow.style.top = (parseInt(self.arrow.style.top.substring(0, self.arrow.style.top.length - 2)) + 15) +'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 = '200px';
|
|
userInfoBox.style.height = '50px';
|
|
userInfoBox.style.top = (parseInt(userInfoBox.style.top.substring(0, userInfoBox.style.top.length - 2)) + 15) +'px';
|
|
self.arrow.style.top = (parseInt(self.arrow.style.top.substring(0, self.arrow.style.top.length - 2)) - 15) +'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 = '200px';
|
|
userInfoBox.style.height = '50px';
|
|
userInfoBox.style.borderRadius = '25px';
|
|
|
|
var userAvatar = this.userAvatar = document.createElement('img');
|
|
userAvatar.style.width = '40px';
|
|
userAvatar.style.height = '40px';
|
|
userAvatar.style.margin = '5px';
|
|
userAvatar.style.backgroundColor = 'white';
|
|
userAvatar.style.borderRadius = '20px';
|
|
if (user.avatar == '') {
|
|
userAvatar.setAttribute('src', 'assets/images/profile-photo.jpg');
|
|
} else {
|
|
userAvatar.setAttribute('src', 'route/file/downloadfile/true/' + user.avatar);
|
|
}
|
|
userAvatar.onclick = function() {
|
|
top.DialogBox.open({
|
|
url: top.restAjax.path('route/userlocation/get-user-detail.html?userId={userId}', [self.user.id]),
|
|
title: '人员详情',
|
|
width: '400px',
|
|
height: '365px',
|
|
onClose: function() {}
|
|
})
|
|
stopPaoPao();
|
|
}
|
|
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 = '48px';
|
|
arrow.style.left = '20px';
|
|
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 = '50px';
|
|
arrowBottomBig.style.left = '15px';
|
|
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);
|
|
}
|
|
}
|
|
|
|
this.baiduMap.getPanes().labelPane.appendChild(userInfoBox);
|
|
return userInfoBox;
|
|
}
|
|
|
|
UserAvatarAndUserName.prototype.draw = function () {
|
|
var pixel = this.baiduMap.pointToOverlayPixel(this.point);
|
|
this.userInfoBox.style.left = pixel.x - parseInt(this.arrow.style.left) + '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);
|
|
}
|
|
|
|
function markWithUserAvatar(map, point, avatar) {
|
|
|
|
function UserAvatar(map, point, avatar) {
|
|
this.baiduMap = map;
|
|
this.point = point;
|
|
this.avatar = avatar;
|
|
}
|
|
|
|
UserAvatar.prototype = new BMap.Overlay();
|
|
UserAvatar.prototype.initialize = function () {
|
|
var userAvatarBox = this.userAvatarBox = document.createElement('div');
|
|
userAvatarBox.style.position = 'absolute';
|
|
userAvatarBox.style.zIndex = BMap.Overlay.getZIndex(this.point.lat);
|
|
userAvatarBox.style.backgroundColor = 'green';
|
|
userAvatarBox.style.border = '1px solid white';
|
|
userAvatarBox.style.width = '50px';
|
|
userAvatarBox.style.height = '50px';
|
|
userAvatarBox.style.borderRadius = '25px';
|
|
|
|
var userAvatar = this.userAvatar = document.createElement('img');
|
|
userAvatar.style.width = '40px';
|
|
userAvatar.style.height = '40px';
|
|
userAvatar.style.margin = '4px';
|
|
userAvatar.style.backgroundColor = 'white';
|
|
userAvatar.style.borderRadius = '20px';
|
|
if (avatar == '') {
|
|
userAvatar.setAttribute('src', 'assets/images/profile-photo.jpg');
|
|
} else {
|
|
userAvatar.setAttribute('src', 'route/file/downloadfile/true/' + avatar);
|
|
}
|
|
userAvatarBox.appendChild(userAvatar);
|
|
|
|
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 = '46px';
|
|
arrow.style.left = '14px';
|
|
arrow.style.overflow = 'hidden';
|
|
userAvatarBox.appendChild(arrow);
|
|
|
|
this.baiduMap.getPanes().labelPane.appendChild(userAvatarBox);
|
|
return userAvatarBox;
|
|
}
|
|
|
|
UserAvatar.prototype.draw = function () {
|
|
var pixel = this.baiduMap.pointToOverlayPixel(this.point);
|
|
this.userAvatarBox.style.left = pixel.x - 25 + 'px';
|
|
this.userAvatarBox.style.top = pixel.y - 57 + 'px';
|
|
}
|
|
|
|
UserAvatar.prototype.setPosition = function (point) {
|
|
this.point = point;
|
|
this.draw();
|
|
}
|
|
|
|
return new UserAvatar(map, point, avatar);
|
|
}
|
|
|
|
function markWithUserAvatarWithTitle(map, point, avatar, title) {
|
|
|
|
function UserAvatar(map, point, avatar, title) {
|
|
this.baiduMap = map;
|
|
this.point = point;
|
|
this.avatar = avatar;
|
|
this.title = title;
|
|
}
|
|
|
|
UserAvatar.prototype = new BMap.Overlay();
|
|
UserAvatar.prototype.initialize = function () {
|
|
var self = this;
|
|
var userAvatarBox = this.userAvatarBox = document.createElement('div');
|
|
userAvatarBox.style.position = 'absolute';
|
|
userAvatarBox.style.zIndex = BMap.Overlay.getZIndex(this.point.lat);
|
|
userAvatarBox.style.backgroundColor = 'green';
|
|
userAvatarBox.style.border = '1px solid white';
|
|
userAvatarBox.style.width = '50px';
|
|
userAvatarBox.style.height = '50px';
|
|
userAvatarBox.style.borderRadius = '25px 25px 0 0';
|
|
|
|
var userAvatar = this.userAvatar = document.createElement('img');
|
|
userAvatar.style.width = '40px';
|
|
userAvatar.style.height = '40px';
|
|
userAvatar.style.margin = '4px';
|
|
userAvatar.style.backgroundColor = 'white';
|
|
userAvatar.style.borderRadius = '20px';
|
|
if (avatar == '') {
|
|
userAvatar.setAttribute('src', 'assets/images/profile-photo.jpg');
|
|
} else {
|
|
userAvatar.setAttribute('src', 'route/file/downloadfile/true/' + avatar);
|
|
}
|
|
userAvatarBox.appendChild(userAvatar);
|
|
|
|
var userTitle = this.userTitle = document.createElement('div');
|
|
userTitle.style.position = 'absolute';
|
|
userTitle.style.width = '160px';
|
|
userTitle.style.padding = '2px';
|
|
userTitle.style.borderRadius = '13px';
|
|
userTitle.style.backgroundColor = 'green';
|
|
userTitle.style.color = 'white';
|
|
userTitle.style.border = '1px solid white';
|
|
userTitle.style.textAlign = 'center';
|
|
userTitle.style.top = '48px';
|
|
userTitle.style.left = '-60px';
|
|
userTitle.appendChild(document.createTextNode(this.title));
|
|
userAvatarBox.appendChild(userTitle);
|
|
|
|
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 = '72px';
|
|
arrow.style.left = '14px';
|
|
arrow.style.overflow = 'hidden';
|
|
userAvatarBox.appendChild(arrow);
|
|
|
|
this.baiduMap.getPanes().labelPane.appendChild(userAvatarBox);
|
|
return userAvatarBox;
|
|
}
|
|
|
|
UserAvatar.prototype.draw = function () {
|
|
var pixel = this.baiduMap.pointToOverlayPixel(this.point);
|
|
this.userAvatarBox.style.left = (pixel.x - 26) + 'px';
|
|
this.userAvatarBox.style.top = (pixel.y - 82) + 'px';
|
|
this.userTitle.innerHTML = this.title;
|
|
}
|
|
|
|
UserAvatar.prototype.setPosition = function (point, time) {
|
|
this.point = point;
|
|
this.title = time;
|
|
this.draw();
|
|
}
|
|
|
|
return new UserAvatar(map, point, avatar, title);
|
|
} |