百度地图API详细介绍

<!DOCTYPE html>

<html>

<head>

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>

</head>

<body>

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>