<!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>