* url {String} 图片的url地址。(必选)
* size {Size} 图片的大小。（必选）
* anchor {Size} 图标定位在地图上的位置相对于图标左上角的偏移值，默认偏移值为图标的中心位置。（可选）
* offset {Size} 图片相对于可视区域的偏移值，此功能的作用等同于CSS中的background-position属性。（可选）
* textSize {Number} 文字的大小。（可选，默认10）
* textColor {String} 文字的颜色。（可选，默认black）
*/ BMapLib.TextIconOverlay = function(position, text, options){ this._position = position; this._text = text; this._options = options || {}; this._styles = this._options['styles'] || []; (!this._styles.length) && this._setupDefaultStyles(); }; T.lang.inherits(TextIconOverlay, BMapGL.Overlay, "TextIconOverlay"); TextIconOverlay.prototype._setupDefaultStyles = function(){ var sizes = [53, 56, 66, 78, 90]; for(var i = 0, size; size = sizes[i]; i++){ this._styles.push({ url:_IMAGE_PATH + i + '.' + _IMAGE_EXTENSION, size: new BMapGL.Size(size, size) }); }//for循环的简洁写法 }; /** *继承Overlay的initialize方法，自定义覆盖物时必须。 *@param {Map} map BMapGL.Map的实例化对象。 *@return {HTMLElement} 返回覆盖物对应的HTML元素。 */ TextIconOverlay.prototype.initialize = function(map){ this._map = map; this._domElement = document.createElement('div'); this._domElement.className = 'custom-image-overlay'; // this._updateCss(); // this._updateText(); this._updatePosition(); this._bind(); this._map.getPanes().markerMouseTarget.appendChild(this._domElement); return this._domElement; }; /** *继承Overlay的draw方法，自定义覆盖物时必须。 *@return 无返回值。 */ TextIconOverlay.prototype.draw = function(){ this._map && this._updatePosition(); }; /** *获取该覆盖物上的文字。 *@return {String} 该覆盖物上的文字。 */ TextIconOverlay.prototype.getText = function(){ return this._text; }; /** *设置该覆盖物上的文字。 *@param {String} text 要设置的文字，通常是字母A-Z或数字0-9。 *@return 无返回值。 */ TextIconOverlay.prototype.setText = function(text, imageUrl){ if(text && (!this._text || (this._text.toString() != text.toString()))){ this._text = text; // this._updateText(); this._updateCss(imageUrl); this._updatePosition(); } }; /** *获取该覆盖物的位置。 *@return {Point} 该覆盖物的经纬度坐标。 */ TextIconOverlay.prototype.getPosition = function () { return this._position; }; /** *设置该覆盖物的位置。 *@param {Point} position 要设置的经纬度坐标。 *@return 无返回值。 */ TextIconOverlay.prototype.setPosition = function (position) { if(position && (!this._position || !this._position.equals(position))){ this._position = position; this._updatePosition(); } }; /** *由文字信息获取风格数组的对应索引值。 *内部默认的对应函数为文字转换为数字除以10的结果，比如文字8返回索引0，文字25返回索引2. *如果需要自定义映射关系，请覆盖该函数。 *@param {String} text 文字。 *@param {Array
${this._text > 1 ? customImageNumber : ''}
${imageUrl ? imageElement : ''}
`
const labelDocument = new DOMParser().parseFromString(htmlString, 'text/html');
const label = labelDocument.body.firstElementChild;
this._domElement.append(label);
};
TextIconOverlay.prototype.buildImageCssText = function(style) {
//根据style来确定一些默认值
var size = style['size'];
var anchor = style['anchor'];
var textColor = style['textColor'] || 'black';
var textSize = style['textSize'] || 10;
var cssText = [];
cssText.push('height:' + size.height + 'px; line-height:' + size.height + 'px;');
cssText.push('width:' + size.width + 'px; text-align:center;');
cssText.push('cursor:pointer; color:' + textColor + '; position:absolute; font-size:' +
textSize + 'px; font-family:Arial,sans-serif; font-weight:bold');
return cssText.join('');
};
/**
*更新覆盖物的显示文字。
*@return 无返回值。
*/
TextIconOverlay.prototype._updateText = function(){
if (this._domElement) {
this._domElement.innerHTML = this._text;
}
};
/**
*调整覆盖物在地图上的位置更新覆盖物的显示文字。
*@return 无返回值。
*/
TextIconOverlay.prototype._updatePosition = function(){
if (this._domElement && this._position) {
var style = this._domElement.style;
var pixelPosition= this._map.pointToOverlayPixel(this._position);
pixelPosition.x -= Math.ceil(parseInt(style.width) / 2);
pixelPosition.y -= Math.ceil(parseInt(style.height) + 8);
style.left = pixelPosition.x + "px";
style.top = pixelPosition.y + "px";
}
};
/**
* 为该覆盖物的HTML元素构建CSS
* @param {IconStyle} 一个图标的风格。
* @return {String} 构建完成的CSSTEXT。
*/
TextIconOverlay.prototype._buildCssText = function(style) {
//根据style来确定一些默认值
var url = style['url'];
var size = style['size'];
var anchor = style['anchor'];
var offset = style['offset'];
var textColor = style['textColor'] || 'black';
var textSize = style['textSize'] || 10;
var cssText = [];
if (T.browser["ie"] < 7) {
cssText.push('filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(' +
'sizingMethod=scale,src="' + url + '");');
} else {
cssText.push('background-image:url(' + url + ');');
var backgroundPosition = '0 0';
(offset instanceof BMapGL.Size) && (backgroundPosition = offset.width + 'px' + ' ' + offset.height + 'px');
cssText.push('background-position:' + backgroundPosition + ';');
}
if (size instanceof BMapGL.Size){
if (anchor instanceof BMapGL.Size) {
if (anchor.height > 0 && anchor.height < size.height) {
cssText.push('height:' + (size.height - anchor.height) + 'px; padding-top:' + anchor.height + 'px;');
}
if(anchor.width > 0 && anchor.width < size.width){
cssText.push('width:' + (size.width - anchor.width) + 'px; padding-left:' + anchor.width + 'px;');
}
} else {
cssText.push('height:' + size.height + 'px; line-height:' + size.height + 'px;');
cssText.push('width:' + size.width + 'px; text-align:center;');
}
}
cssText.push('cursor:pointer; color:' + textColor + '; position:absolute; font-size:' +
textSize + 'px; font-family:Arial,sans-serif; font-weight:bold');
return cssText.join('');
};
/**
* 当鼠标点击该覆盖物时会触发该事件
* @name TextIconOverlay#click
* @event
* @param {Event Object} e 回调函数会返回event参数，包括以下返回值：
* "type : {String} 事件类型 *
"target：{BMapLib.TextIconOverlay} 事件目标 * */ /** * 当鼠标进入该覆盖物区域时会触发该事件 * @name TextIconOverlay#mouseover * @event * @param {Event Object} e 回调函数会返回event参数，包括以下返回值： *
"type : {String} 事件类型 *
"target：{BMapLib.TextIconOverlay} 事件目标 *
"point : {BMapGL.Point} 最新添加上的节点BMap.Point对象 *
"pixel：{BMapGL.pixel} 最新添加上的节点BMap.Pixel对象 * * @example 参考示例：
* myTextIconOverlay.addEventListener("mouseover", function(e) { alert(e.point); }); */ /** * 当鼠标离开该覆盖物区域时会触发该事件 * @name TextIconOverlay#mouseout * @event * @param {Event Object} e 回调函数会返回event参数，包括以下返回值： *
"type : {String} 事件类型 *
"target：{BMapLib.TextIconOverlay} 事件目标 *
"point : {BMapGL.Point} 最新添加上的节点BMap.Point对象 *
"pixel：{BMapGL.pixel} 最新添加上的节点BMap.Pixel对象 * * @example 参考示例：
* myTextIconOverlay.addEventListener("mouseout", function(e) { alert(e.point); }); */ /** * 为该覆盖物绑定一系列事件 * 当前支持click mouseover mouseout * @return 无返回值。 */ TextIconOverlay.prototype._bind = function(){ if (!this._domElement){ return; } var me = this; var map = this._map; var BaseEvent = T.lang.Event; function eventExtend(e, be){ var elem = e.srcElement || e.target; var x = e.clientX || e.pageX; var y = e.clientY || e.pageY; if (e && be && x && y && elem){ var offset = T.dom.getPosition(map.getContainer()); be.pixel = new BMapGL.Pixel(x - offset.left, y - offset.top); be.point = map.pixelToPoint(be.pixel); } return be; }//给事件参数增加pixel和point两个值 T.event.on(this._domElement,"mouseover", function(e){ me.dispatchEvent(eventExtend(e, new BaseEvent("onmouseover"))); }); T.event.on(this._domElement,"mouseout", function(e){ me.dispatchEvent(eventExtend(e, new BaseEvent("onmouseout"))); }); T.event.on(this._domElement,"click", function(e){ me.dispatchEvent(eventExtend(e, new BaseEvent("onclick"))); }); }; })();