心得笔记网站首页 心得笔记

百度地图javascript接口开发-自定义覆盖物

发布时间：2016-11-20 14:24:23编辑：雪饮阅读（）

自定义覆盖物示例:

<!doctype html>

<html>

<head>

<title>无标题文档</title>

html{height:100%;}

body{height:100%;margin:0px;padding:0px;}

#container{

clear:both;

height:100%;

width:100%;

}

</style>

var map;//地图对象

function InitMap(){

map=new BMap.Map("container");

var point=new BMap.Point(104.06,30.67);//成都的经纬度

map.centerAndZoom(point,15);

map.enableScrollWheelZoom();//开启鼠标滚动对地图进行缩放

//添加自定义覆盖物

var mySquare=new SquareOverlay(map.getCenter(),20,"red");

map.addOverlay(mySquare);

}

//继承API的BMap.Overlay

SquareOverlay.prototype=new BMap.Overlay();

//定义自定义覆盖物的构造函数

function SquareOverlay(center,length,color){

this._center=center;

this._length=length;

this._color=color;

}

//实现初始化方法

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.style.opacity=0.5;

//将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);

this._div.style.left=position.x-this._length/2+"px";

this._div.style.top=position.y-this._length/2+"px";

}

</script>

</head>

</body>

</html>

关键字词：百度地图api,javascript

上一篇：百度地图javascript接口开发-覆盖物

下一篇：百度地图javascript接口开发-label标注-折线-多边形-圆-海量点

您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记

百度地图javascript接口开发-自定义覆盖物

相关文章

您当前的位置：首页 > 学无止境 > 心得笔记网站首页心得笔记