Chinaunix首页 | 论坛 | 博客

见异思迁zhangqian.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

nuoyazhou110

  • 博客访问： 909998
  • 博文数量： 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）

我的朋友
最近访客
推荐博文
判断点在多边形内JS

分类： 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.     });

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

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

  56.         if( isInArea == false ) {
  57.             alert('点在多边形外');
  58.         } else {
  59.             alert('点在多边形内');
  60.         }

  62.     }
  63.     map.on('click', callBackFn);

  65.     var editor={};
  66.     editor._polygonEditor= new AMap.PolyEditor(map, polygon);
  67.     //绘制多边形开始
  68.     editor.startEditPolygon=function(){
  69.         editor._polygonEditor.open();
  70.     }
  71.     editor.closeEditPolygon=function(){
  72.         editor._polygonEditor.close();
  73.     }
  74. </script>
  75. </html>

阅读(1623) | 评论(0) | 转发(0) |
0

上一篇：PHP libevent实现聊天室

下一篇：多进程监听同一个端口

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6