您的位置：首页 > Web前端 > HTML
百度地图Api进阶教程-创建标注和自定义标注3.html

2014-11-22 19:01 447 查看
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>11.1</title>
<script type="text/javascript">
function initialize() {
var map = new BMap.Map("container", { minZoom: 12, maxZoom: 25 });
map.centerAndZoom("成都", 13);
map.enableScrollWheelZoom(true);
//点击事件
map.addEventListener("click", function (e) {
document.getElementById("r-result").innerHTML = e.point.lng + "," + e.point.lat;
});

var point = new BMap.Point(104.117287, 30.685906);
var marker = new BMap.Marker(point);
map.addOverlay(marker);

var point = new BMap.Point(104.057287, 30.685906);
var myicon = new BMap.Icon("http://t3.baidu.com/it/u=1119318591,884730191&fm=0&gp=0.jpg", new BMap.Size(55, 55));
var marker = new BMap.Marker(point, { icon: myicon });
map.addOverlay(marker);

//自定义遮盖物
// 定义自定义覆盖物的构造函数
var point = new BMap.Point(104.117287, 30.695906); //自定义遮盖物
function SquareOverlay(point, length, color) {
this._point = point;
this._length = length;
this._color = color;
}

// 继承API的BMap.Overlay
SquareOverlay.prototype = new BMap.Overlay();

// 实现初始化方法
SquareOverlay.prototype.initialize = function (map) {
// 保存map对象实例
this._map = map;
// 创建div元素，作为自定义覆盖物的容器
var div = document.createElement("div");
div.style.position = "absolute";
// 可以根据参数设置元素外观
div.style.width = this._length + "px";
div.style.height = this._length + "px";
div.style.background = this._color;
// 将div添加到覆盖物容器中
map.getPanes().markerPane.appendChild(div);
// 保存div实例
this._div = div;
// 需要将div元素作为方法的返回值，当调用该覆盖物的show、
// hide方法，或者对覆盖物进行移除时，API都将操作此元素。
return div;
}

// 实现绘制方法  （您需要在draw方法中设置覆盖物的位置，每当地图状态发生变化（比如：位置移动、级别变化）时，API都会调用覆盖物的draw方法，用于重新计算覆盖物的位置）
SquareOverlay.prototype.draw = function () {

var position = map.pointToOverlayPixel(this._point);
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";
}
}
// 添加自定义覆盖物
var mySquare = new SquareOverlay(point, 22, "red");
map.addOverlay(mySquare);

}

function loadScript() {
var script = document.createElement("script");
script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div style="float: left; width: 100px;">
1</div>
<div id="container" style="width: 800px; height: 500px">
</div>
<div id="r-result" style="float: left; width: 100px;">
打印坐标</div>
<div id="result">
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航