You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.3 KiB
JavaScript
70 lines
2.3 KiB
JavaScript
5 years ago
|
$(function() {
|
||
|
|
|
||
|
|
// 百度地图API功能
|
||
|
|
var mp = new BMap.Map("container", {
|
||
|
|
enableMapClick: false
|
||
|
|
});
|
||
|
|
var addPoint = new BMap.Point(119.280631, 26.08057);
|
||
|
|
var marker = new BMap.Marker(addPoint); // 创建标注
|
||
|
|
mp.addOverlay(marker); // 将标注添加到地图中
|
||
|
|
mp.centerAndZoom(addPoint, 15);
|
||
|
|
mp.enableScrollWheelZoom();
|
||
|
|
// 复杂的自定义覆盖物
|
||
|
|
function ComplexCustomOverlay(point, text) {
|
||
|
|
this._point = point;
|
||
|
|
this._text = text;
|
||
|
|
}
|
||
|
|
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.border = "0.01rem solid #BC3B3A";
|
||
|
|
// div.style.backgroundColor = "#ffffff";
|
||
|
|
div.style.padding = "0.02rem";
|
||
|
|
div.style.height = "0.18rem";
|
||
|
|
div.style.width = "3rem";
|
||
|
|
// div.style.lineHeight = "0.18rem";
|
||
|
|
// div.style.whiteSpace = "nowrap";
|
||
|
|
div.style.MozUserSelect = "none";
|
||
|
|
div.style.fontSize = "0.18rem"
|
||
|
|
var p = this._span = document.createElement("p");
|
||
|
|
p.style.position = "absolute";
|
||
|
|
p.style.top = "-450%";
|
||
|
|
p.style.left = "-50%";
|
||
|
|
p.style.width = "3rem";
|
||
|
|
p.style.backgroundColor = "#ffffff";
|
||
|
|
p.style.lineHeight = "0.3rem";
|
||
|
|
p.style.textAlign = "center";
|
||
|
|
div.appendChild(p);
|
||
|
|
p.appendChild(document.createTextNode(this._text));
|
||
|
|
var that = this;
|
||
|
|
|
||
|
|
var arrow = this._arrow = document.createElement("div");
|
||
|
|
arrow.style.background = "url(../images/address-point.png) center no-repeat";
|
||
|
|
arrow.style.backgroundSize = "120% 120%";
|
||
|
|
arrow.style.position = "absolute";
|
||
|
|
arrow.style.width = "0.3rem";
|
||
|
|
arrow.style.height = "0.3rem";
|
||
|
|
arrow.style.top = "-80%";
|
||
|
|
arrow.style.left = "-8%";
|
||
|
|
arrow.style.overflow = "hidden";
|
||
|
|
div.appendChild(arrow);
|
||
|
|
|
||
|
|
|
||
|
|
mp.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";
|
||
|
|
}
|
||
|
|
|
||
|
|
var myCompOverlay = new ComplexCustomOverlay(addPoint, "福建省福州市鼓楼区福大怡山文化创意园11号楼");
|
||
|
|
|
||
|
|
mp.addOverlay(myCompOverlay);
|
||
|
|
});
|