<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html, body {
100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map {
100%;
height: 100%;
}
.btn-twinkle {
color: #fff;
border: none;
animation: twinkle 0.1s alternate infinite;
}
@keyframes twinkle {
from {
background: #F3F1EC;
}
to {
background: #FF0000;
}
}
</style>
<script src="/Scripts/jquery-1.8.2.min.js"></script>
</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(Id, color, x, y) {
// this._center = center;
// this._length = length;
this._length = 10;
this._color = color;
this._x = x;
this._y = y;
this._Id = Id;
}
// 继承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";
div.id = this._Id;
if (this._color == "red") {
div.className = "btn-twinkle";
}
div.onclick = function (e) {
debugger;
// 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),6); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
map.setMapStyle({
style: 'midnight'
});
debugger;
var opts = {
200, // 信息窗口宽度
height: 100, // 信息窗口高度
title: "济南邦德激光股份公司", // 信息窗口标题
enableMessage: true,//设置允许信息窗发送短息
message: "做民族激光领导者"
};
// var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象
// 添加自定义覆盖物
map.addOverlay(new SquareOverlay('1', "red", '117.684667', '36.233654'));
map.addOverlay(new SquareOverlay('2', "red", '107.644227', '35.726801'));
map.addOverlay(new SquareOverlay('3', "red", '106.530635', '29.544606'));
map.addOverlay(new SquareOverlay('4', "yellow", '123.987289', '47.3477'));
map.addOverlay(new SquareOverlay('5', "green", '91.750644', '29.229027'));
map.addOverlay(new SquareOverlay('6', "black", ' 85.614899', '42.127001'));
map.addOverlay(new SquareOverlay('7', "red", '37.615979', '55.742769'));
map.addOverlay(new SquareOverlay('8', "red", '-121.326863', '38.377087'));
map.addOverlay(new SquareOverlay('9', "red", '135.574686', '34.330914'));
map.addOverlay(new SquareOverlay('10', "red", '73.870152', '33.502642'));
//单击获取点击的经纬度（以此来定位外国收费的地点）
map.addEventListener("click", function (e) {
alert(e.point.lng + "," + e.point.lat);
//var x = e.point.lng;
//var y = e.point.lat;
//var str = String(x) + String(y)
//alert(str);
//var pv = new BMap.Point(e.point.lng, e.point.lat);
//var optsv = {
// 200, // 信息窗口宽度
// height: 100, // 信息窗口高度
// title: str, // 信息窗口标题
// enableMessage: true,//设置允许信息窗发送短息
// message: "" + str.toString() + ""
//};
//map.openInfoWindow(new BMap.InfoWindow("地点经纬度：", optsv), pv); //开启信息窗口
});
//国内根据地点名称查找经纬度
$.ajax({
type: "GET",
url: "../Home/getPoint",
data: {},
dataType: "json",
success: function (result) {
debugger;
var data = eval(result);
//alert(data.result.location);
//alert(data.result.location.lat);
//alert(data.result.location.lng);
map.addOverlay(new SquareOverlay('7', "red", data.result.location.lng, data.result.location.lat));
}
});
</script>
</body>
</html>