51地图上画圆

最新推荐文章于 2024-04-04 18:12:45 发布

w375179337

最新推荐文章于 2024-04-04 18:12:45 发布

阅读量1.6k

点赞数

分类专栏： 51地图文章标签： function javascript 文档 api behavior null

本文链接：https://blog.csdn.net/w375179337/article/details/5691869

版权

51地图专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312"/>
<meta name="keywords" content="LTMaps.addOverLay,LTBaseOverLay,JavaScript,灵图,51ditu Maps API 范例文档,地图,范例文档"/?>
<title>自定义标注：在地图上画圆_51ditu Maps API 范例文档</title>
<style type="text/css">v/:*{behavior:url(#default#VML);}</style>
<script language="javascript" src="http://vipapi.51ditu.com/js/maps.js"></script>

<script language="javascript">
var map;

以下是自定义标注LTCircle的定义代码
//构造函数，使用四个参数，
// bounds 类型是LTBounds,代表画圆的位置和大小
// color 线条颜色
// bgcolor 背景颜色
// weight 线条宽度
// opacity 部透明度 0-1
function LTCircle(bounds,color,bgcolor,weight,opacity)
{
  //如果不是IE,则不支持VML,直接退出
  if(!document.all){return;}
  //读取参数
  this.bounds=bounds;
  this.color=color?color:"blue";
  this.bgcolor=bgcolor?bgcolor:"#99FFCC";
  this.weight=weight?weight:3;
  this.opacity=opacity?opacity:0.5;
  //创建画圆的层
  this.circle=document.createElement("v:oval");
  this.circle.style.position="absolute";
  this.circle.unselectable="on";
  this.stroke=document.createElement("v:stroke");
  this.stroke.weight=this.weight;
  this.stroke.color=this.color;
  this.stroke.opacity=this.opacity;
  this.circle.appendChild(this.stroke);
  //如果背景被设置为透明
  if(this.bgcolor!="transparent")
  {
   this.circle.filled=true;
   this.fill=document.createElement("v:fill");
   this.fill.color=this.bgcolor;
   this.fill.opacity=this.opacity;
   this.circle.appendChild(this.fill);
  }
  else
  {
   this.circle.filled=false;
  }
  this.circle.style.position="absolute";
  this.circle.style.zIndex=420;
}
//在标记被添加到地图(addOverLay)时执行,参数是地图对象
LTCircle.prototype.initialize=function(map)
{
  //如果没有创建画圆的层，或者已经被清除，或者已经添加到地图，则直接退出
  if(!this.circle || this.map){return false;}
  this.map=map;
}
//重绘函数，每次在地图移动的时候执行，如果参数flag为true代表必须重绘
LTCircle.prototype.reDraw=function(flag)
{
  //如果不是必须重绘，则不重绘，大部分的标注都不需要每次重绘
  if(!flag){return;}
  //取得范围bounds左上角的坐标
  var lb=this.map.getOverLayPosition(new LTPoint(this.bounds.Xmin,this.bounds.Ymax));
  //根据左上角坐标设置画圆的位置
  this.circle.style.left=lb[0]+"px";
  this.circle.style.top=lb[1]+"px";
  //取得范围bounds右下角坐标
  var rt=this.map.getOverLayPosition(new LTPoint(this.bounds.Xmax,this.bounds.Ymin));
  //设置画圆的大小
  this.circle.style.width=(rt[0]-lb[0])+"px";
  this.circle.style.height=(rt[1]-lb[1])+"px";
}
//返回层的函数，返回的层将会被添加到地图之中
LTCircle.prototype.getObject=function(){return this.circle;}
//在从地图上删除的时候(removeOverLay)被调用
LTCircle.prototype.remove=function()
{
  this.map=null;
}
//彻底销毁整个控件，节省内存
LTCircle.prototype.depose=function()
{
  LTEvent.deposeNode(this.circle);
  this.circle=null;
  this.stroke=null;
  this.bounds=null;
}
//设置圆的bounds，提供该方法以便可以实时的更改画圆的大小和位置，可能用在让用户通过拖放绘制圆的功能上非常有用
LTCircle.prototype.setBounds=function(bounds)
{
  this.bounds=bounds;
  if(this.map)
  {
   this.reDraw(true);
  }
}
///自定义标注LTCircle的定义代码完成
/
function onLoad()
{
  map=new LTMaps("mapDiv");
  map.centerAndZoom(new LTPoint(11640969,3994940),6);
  map.addControl(new LTStandMapControl());

  var bounds=new LTBounds(11630969 , 3979945,11650969 , 3999945);
  var overlay=new LTCircle(bounds,"red","transparent",2,0.6);
  map.addOverLay(overlay);

  var bounds=new LTBounds(11620969 , 3979945,11640969 , 3999945);
  var overlay1=new LTCircle(bounds);
  map.addOverLay(overlay1);
}
</script>
</head>
<body οnlοad="onLoad()">
<div id="mapDiv" style="position:absolute;width:400px; height:300px;"><div align="center" style="margin:12px;"><a href="http://api.51ditu.com/docs/mapsapi/help.html" target="_blank" style="color:#D01E14;font-weight:bolder;font-size:12px;">看不到地图请点这里</a></div></div>
<div style="position:absolute;left:420px;">
  <ul>
  <li>查看<b>本页面源文件</b>可以了解如何使用51ditu Maps API实现本功能；</li><br/><br/>

  <li>本范例演示自定义标注的高级应用，在这个范例之中，自定义了一个用来画圆的标注，不过只能在IE之上使用.</li>
  <li>对一个圆标注可以设置其边线颜色、背景色、边线线宽，透明度，如果需要仅仅背景透明，可以将背景颜色设置成"transport";</li>
  <li>因为实际上是根据一个矩形范围来绘制的，所以，要绘制一个椭圆当然也不在话下</li>

  <br/><br/><li><a href="../../examples.html">返回所有范例列表</a></li>
  </ul>
</div>
</body>
</html>