<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map {
width: 100%;
height: 100%;
}
.btn-twinkle {
color: #fff;
border: none;
animation: twinkle 0.1s alternate infinite;
}
@keyframes twinkle {
from {
background: #F3F1EC;
}
to {
background: #FF0000;
}
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0XEf3Sbuj9Yu3LGkRvi2ylPaoord65cS"></script>
<script type="text/javascript">
function SquareOverlay(color, x, y) {
// this._center = center;
// this._length = length;
this._length = 10;
this._color = color;
this._x = x;
this._y = y;
}
// 继承API的BMap.Overlay
SquareOverlay.prototype = new BMap.Overlay();
// 实现初始化方法
SquareOverlay.prototype.initialize = function (map) {
// 保存map对象实例
this._map = map;
// 创建div元素，作为自定义覆盖物的容器
var div = document.createElement("canvas");
div.style.position = "absolute";
// 可以根据参数设置元素外观
div.style.width = this._length + "px";
div.style.height = this._length + "px";
div.style.background = this._color;
div.style.borderRadius = this._length / 2 + "px";
div.style.border = "solid rgb(" + this._length + "," + this._length + "," + this._length + ") 1px";
if (this._color == "red") {
div.className = "btn-twinkle";
}
div.onclick = function (e, a) {
// map.openInfoWindow(new BMap.InfoWindow("地址：济南邦德激光股份公司", opts), new BMap.Point(\'117.684667\', \'36.233654\')); //开启信息窗口
debugger;
var p = new BMap.Point(\'117.684667\', \'36.233654\');
//var p1 = map.overlayPixelToPoint(e.screenX, e.screenY);
//var p2 = map.pixelToPoint(e.pageX, e.pageY);
map.openInfoWindow(new BMap.InfoWindow("地址：济南邦德激光股份公司", opts), p); //开启信息窗口
};
// 将div添加到覆盖物容器中
map.getPanes().markerPane.appendChild(div);
// 保存div实例
this._div = div;
// 需要将div元素作为方法的返回值，当调用该覆盖物的show、
// hide方法，或者对覆盖物进行移除时，API都将操作此元素。
return div;
}
//实现绘制方法
SquareOverlay.prototype.draw = function () {
// 根据地理坐标转换为像素坐标，并设置给容器
// var position = this._map.pointToOverlayPixel(this._center);
var position = this._map.pointToOverlayPixel(new BMap.Point(this._x, this._y));
this._div.style.left = position.x - this._length / 2 + "px";
this._div.style.top = position.y - this._length / 2 + "px";
}
// 实现显示方法
SquareOverlay.prototype.show = function () {
if (this._div) {
this._div.style.display = "";
}
}
// 实现隐藏方法
SquareOverlay.prototype.hide = function () {
if (this._div) {
this._div.style.display = "none";
}
}
// 添加自定义方法
SquareOverlay.prototype.toggle = function () {
if (this._div) {
if (this._div.style.display == "") {
this.hide();
}
else {
this.show();
}
}
}
// 百度地图API功能
var map = new BMap.Map("map", {
enableMapClick: false
}); // 创建Map实例
map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.setMapStyle({
style: \'midnight\'
});
debugger;
var opts = {
width: 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "XXXXXXXXX", // 信息窗口标题
enableMessage: true,//设置允许信息窗发送短息
message: "XXXXXXXX"
};
// var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象
// 添加自定义覆盖物
map.addOverlay(new SquareOverlay("red", \'117.684667\', \'36.233654\'));
map.addOverlay(new SquareOverlay("yellow", \'123.987289\', \'47.3477\'));
map.addOverlay(new SquareOverlay("green", \'91.750644\', \'29.229027\'));
map.addOverlay(new SquareOverlay("black", \' 85.614899\', \'42.127001\'));
//var myArray = new Array();
//function showInfo(e) {
// debugger;
// // alert(e.point.lng + ", " + e.point.lat);
// myArray = new Array()
// myArray[0] = e.point.lng;
// myArray[1] = e.point.lat;
//}
//map.addEventListener("click", showInfo);
////实时刷新时间单位为毫秒
//setInterval(\'refreshQuery()\', 2000);
///* 刷新查询 */
//function refreshQuery() {
// // map.removeOverlay(new SquareOverlay("red", \'117.684667\', \'36.233654\'));
// map.removeOverlay(new BMap.Point(\'117.684667\', \'36.233654\'));
// alert(1);
// map.addOverlay(new SquareOverlay("red", \'117.684667\', \'36.233654\'));
//}
</script>
</body>
</html>