Chinaunix首页 | 论坛 | 博客
  • 博客访问: 885213
  • 博文数量: 91
  • 博客积分: 803
  • 博客等级: 准尉
  • 技术积分: 1051
  • 用 户 组: 普通用户
  • 注册时间: 2012-05-24 13:42
文章分类

全部博文(91)

文章存档

2021年(1)

2020年(4)

2019年(4)

2018年(9)

2017年(11)

2016年(11)

2015年(6)

2014年(3)

2013年(28)

2012年(14)

分类: JavaScript

2017-08-28 09:47:24


点击(此处)折叠或打开

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="Generator" content="EditPlus?">
  6.   <meta name="Author" content="">
  7.   <meta name="Keywords" content="">
  8.   <meta name="Description" content="">
  9.   <title>Document</title>
  10.   <script src="" type="text/javascript" ></script>
  11.  </head>
  12.  <body>
  13.   <div id="container" style="width:500px; height:300px"></div>
  14.   <input type="button" class="button" value="开始编辑多边形" onClick="editor.startEditPolygon()"/>
  15.   <input type="button" class="button" value="结束编辑多边形" onClick="editor.closeEditPolygon()"/>
  16.  </body>
  17.  <script type="text/javascript" >
  18.     var editorTool, map = new AMap.Map("container", {
  19.         resizeEnable: true,
  20.         center: [116.403322, 39.900255],//地图中心点
  21.         zoom: 13 //地图显示的缩放级别
  22.     });

  23.     var polygonArr = new Array();//多边形覆盖物节点坐标数组
  24.     polygonArr.push([116.397857, 39.910612]);
  25.     polygonArr.push([116.373567, 39.905938]);
  26.     polygonArr.push([116.378116, 39.896917]);
  27.     polygonArr.push([116.415281, 39.899485]);
  28.     var polygon = new AMap.Polygon({
  29.         path: polygonArr,//设置多边形边界路径
  30.         strokeColor: "#FF33FF", //线颜色
  31.         strokeOpacity: 0.2, //线透明度
  32.         strokeWeight: 3, //线宽
  33.         fillColor: "#1791fc", //填充色
  34.         bubble:true,
  35.         fillOpacity: 0.35//填充透明度
  36.     });
  37.     polygon.setMap(map);
  38.     
  39.     console.log(polygonArr);

  40.     var callBackFn = function(e) {
  41.         //alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图!');
  42.         var j = polygonArr.length - 1;
  43.         var isInArea = false;
  44.         for ( i=0; i<polygonArr.length;i++ )
  45.         {
  46.             if( ( (polygonArr[i].lat < e.lnglat.getLat() && polygonArr[j].lat >= e.lnglat.getLat()) || (polygonArr[j].lat < e.lnglat.getLat() && polygonArr[i].lat >= e.lnglat.getLat()) ) ) {
  47.                 if( polygonArr[i].lng + (e.lnglat.getLat() - polygonArr[i].lat) * (polygonArr[j].lng - polygonArr[i].lng) / (polygonArr[j].lat - polygonArr[i].lat) < e.lnglat.getLng() ) {
  48.                     isInArea = !isInArea;
  49.                 }
  50.             }
  51.             j = i;
  52.         }

  53.         if( isInArea == false ) {
  54.             alert('点在多边形外');
  55.         } else {
  56.             alert('点在多边形内');
  57.         }

  58.     }
  59.     map.on('click', callBackFn);

  60.     var editor={};
  61.     editor._polygonEditor= new AMap.PolyEditor(map, polygon);
  62.     //绘制多边形开始
  63.     editor.startEditPolygon=function(){
  64.         editor._polygonEditor.open();
  65.     }
  66.     editor.closeEditPolygon=function(){
  67.         editor._polygonEditor.close();
  68.     }
  69. </script>
  70. </html>

阅读(1546) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~