高德地图JSapi

包含了显示地图；添加标记点；画出围栏；编辑多边形围栏；判断点是否在围栏范围内的方法


<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
 <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点标记</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <style>
        .marker {
            color: #ff6600;
            padding: 4px 10px;
            border: 1px solid #fff;
            white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #0066ff;
        }
        #d1{
            background-color: #4A4A4A;
            position: absolute;
            top: 0px;
            color: white;
            height: 60%;
            width: 18%;
            line-height: 25px;
        
        }
     
    </style>
    <script src="http://webapi.amap.com/maps?v=1.4.6&key=aafdf4a9edda043681ff641e6d9b9ee8&plugin=AMap.PolyEditor,AMap.CircleEditor"></script>
     <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
        <!-- 引入 -->
    <script type="text/javascript">window.jQuery || document.write("<script src='static/js/jquery-1.9.1.min.js'>\x3C/script>");</script>
        <!-- 引入 -->
    <script type="text/javascript" src="static/js/jquery.tips.js"></script><!--提示框-->
    <script type="text/javascript">
    /* 坐标保存 */
    function save(){
        var arg=document.getElementById("arg").value; 
         if(arg==""||arg==null){
             alert("参数为空");
             document.getElementById("arg").focus();
            return false;
        }  
        document.getElementById("Form").submit();
        }

    


    </script>
</head>
<body>
<div id="container"></div>
<div class="button-group" id="d1" style="display: none;" >
<input type="text" name="xy" id="xy"/>
    <div style="height: 60%; overflow:auto;">
        <table id="tab" border="1" >
            <tr>
                <td>坐标点</td>
                <td>操作</td>
            </tr>
    
            <c:forEach items="${varlist}" var="var" varStatus="vs">                
                <tr>
                    <td>${var.x},${var.y}</td>
                    <td><span onclick="deleteRow(this)">删除</span></td>
                </tr>
            </c:forEach>
        
        </table>
    </div>
    <div>
        <form action="fencing/${msg}.do" method="post" name="Form" id="Form">
        <input type="hidden" name="arg" id="arg"/>
         <input type="hidden" name="id" value="${pd.id }"/>
        <input type="hidden" name="name1" value="${pd.name}"/>
        <input type="hidden" name="gid" value="${pd.gid }"/> 
        <input type="text" name="name" id="name" placeholder="请输入名称" style="height: 20px;"/><input  type="button" onclick="save();" value="确定" style="background-color:#6B8E23;width: 50px;height: 30px;color: white;"/>
        </form>
    </div>
</div>
<div  class="button-group">
    <c:if test="${empty varlist}">
    <span style="color: red;" id="sp">
    <font size="4" style="background-color: white;">
    *请选择地点点击添加坐标；
    坐标数大于2个时可点击编辑多边形
    </font>
    </span>
     <input type="button" class="button" id="add" value="添加坐标" onClick="add()"/>
     <input type="button" style="display: none;" id="start" class="button" value="开始编辑多边形" onClick="editor.startEditPolygon()"/>
    <input type="button" style="display: none;" id="end" class="button" value="结束编辑多边形" onClick="editor.closeEditPolygon()"/>
    <input type="button" style="display: none;" id="save" class="button" value="保&nbsp;&nbsp;&nbsp;存" onClick="save()"/>
    </c:if>
    <c:if test="${not empty varlist}">
        <input type="button"  class="button" value="开始编辑多边形" onClick="editor.startEditPolygon()"/>
        <input type="button"  class="button" value="结束编辑多边形" onClick="editor.closeEditPolygon()"/>
            <input type="button"  class="button" value="保&nbsp;&nbsp;&nbsp;存" onClick="save()"/>    
    </c:if>
</div>
<script type="text/javascript">
        /* 设置地图的中心点，并标记 */
        var editorTool,map = new AMap.Map("container", {
            resizeEnable: true,
            center: [114.290924,30.601394],
            zoom: 13 //地图显示的缩放级别
        });         
            
         var lineArr = [];
         start(); 
        function start(){
            var r;
         var table = document.getElementById("tab");
          for(var i=2;1<i&&i<table.rows.length+1;i++){
              r=table.rows[i-1].cells[0].innerText;
             lineArr.push([r.substring(0,r.indexOf(",")),r.substr(r.indexOf(",")+1)]);
                }
            /* 将数组转为字符串，以#号分隔 */
            if(lineArr!=null){
                  var arg = lineArr.join("#");
                  document.getElementById("arg").value=arg+"#";      
                }
        }  
    
        //在地图上绘制折线
        var editor={};
        editor._polygon=(function(){
            return new AMap.Polygon({
                map: map,
                path: lineArr,
                strokeColor: "#0000ff",
                strokeOpacity: 1,
                strokeWeight: 3,
                fillColor: "#CD2626",
                fillOpacity: 0.35
            });
        })();
        map.setFitView();        
        editor._polygonEditor= new AMap.PolyEditor(map, editor._polygon);
        /* 开始编辑 */
        editor.startEditPolygon=function(){
            editor._polygonEditor.open();
        }
        /*结束编辑 */
        editor.closeEditPolygon=function(){
            /* 将数组转为字符串，以#号分隔 */
          var  arg = lineArr.join("#");
          document.getElementById("arg").value=arg+"#"; 
          editor._polygonEditor.close();
        }

        /*如果坐标为空的时候  */
        /* 点击添加事件 */
        function add(){
        var table = document.getElementById("tab");    
        oneRow = table.insertRow();//插入一行  
        cell1= oneRow.insertCell();//单单插入一行是不管用的，需要插入单元格  
        cell2=oneRow.insertCell();  
        cell1.innerHTML =document.getElementById("xy").value;   
        cell2.innerHTML="<span onclick='deleteRow(this)'>删除</span>";
        start(); 
            if(lineArr!=null&&lineArr.length>2){
                //将添加坐标按钮隐藏
               document.getElementById("sp").style.display="none";
                document.getElementById("add").style.display="none";
                 document.getElementById("start").style.display="";
                document.getElementById("end").style.display="";
                document.getElementById("save").style.display="";  
                //在地图上绘制折线
                    editor._polygon=(function(){
                        return new AMap.Polygon({
                            map: map,
                            path: lineArr,
                            strokeColor: "#0000ff",
                            strokeOpacity: 1,
                            strokeWeight: 3,
                            fillColor: "#CD2626",
                            fillOpacity: 0.35
                        });
                    })();

                }
            map.setFitView();        
            editor._polygonEditor= new AMap.PolyEditor(map, editor._polygon);

            /* 开始编辑 */
            editor.startEditPolygon=function(){
                editor._polygonEditor.open();
            }
            /*结束编辑 */
            editor.closeEditPolygon=function(){
                /* 将数组转为字符串，以#号分隔 */
              var arg = lineArr.join("#");
              document.getElementById("arg").value=arg+"#"; 
              editor._polygonEditor.close();
            }
            
        }

        /* 点击获取地图坐标 */
        var clickEventListener = map.on('click', function(e) {
           document.getElementById("xy").value = e.lnglat.getLng() + ',' + e.lnglat.getLat(); 
          /* 点击一次新增一个标记点 */
             var marker= new AMap.Marker({
                map:map,
                position:[e.lnglat.getLng(),e.lnglat.getLat()]
                 });                
        });
    
        
     
</script>
</body>
</html>

     /*  区域范围定义 */
        /*    var polygon = new AMap.Polygon({
                map: map,
                fillOpacity:0.4,
                path: lineArr
            }); */
            /*  用于测试的一个点  */
         /*  var marker1 = new AMap.Marker({
                map: map,
                position: [114.290924,30.601394]
            }); */
           /* 用于测试的一个点*/
         /*  var marker3 = new AMap.Marker({
                map: map,
                position: [114.290908,30.601012]
            }); */
            /* 判断是否在范围内的方法 */
          /*   var marker1InPolygon  = polygon.contains(marker1.getPosition());
            marker1.setLabel({
                content:marker1InPolygon?'内部':'外部',
                offset:new AMap.Pixel(20,0)
            }); */
            /* 判断是否在范围内的方法 */
           /*  var marker3InPolygon  = polygon.contains(marker3.getPosition());
            marker3.setLabel({
                content:marker3InPolygon?'内部':'外部',
                offset:new AMap.Pixel(20,0)
            });  */ 
            /* alert(marker3InPolygon); */

        
         /*         /* 设置可以鼠标移动标记点 */
         marker = new AMap.Marker({
                position: map.getCenter(),
                draggable: true,
                cursor: 'move',
                raiseOnDrag: true
            });
            marker.setMap(map);  */

        /* 设置一个起始标记点 */
                 /*     marker.setPosition([r.substring(0,r.indexOf(",")),r.substr(r.indexOf(",")+1)]);   */
    


    /* 点击获取地图坐标 */
        var clickEventListener = map.on('click', function(e) {
           document.getElementById("xy").value = e.lnglat.getLng() + ',' + e.lnglat.getLat(); 
           /* 点击一次新增一个标记点 */
             var marker2= new AMap.Marker({
                map:map,
                position:[e.lnglat.getLng(),e.lnglat.getLat()]
                 });                
        });




         if(r!=null){
            r=table.rows[1].cells[0].innerText;
        /*     lineArr.push([r.substring(0,r.indexOf(",")),r.substr(r.indexOf(",")+1)]);     */     
               /*     if(lineArr!=null){
                    // 绘制轨迹
                    var polyline = new AMap.Polyline({
                        map: map,
                        path: lineArr,
                        strokeColor: "red",  //线颜色
                        strokeOpacity: 1,     //线透明度
                        strokeWeight: 1,      //线宽
                        strokeStyle: "solid"  //线样式
                    });
                    map.setFitView();                 
            
                }     */ 
              }





    /* 点击添加事件 */
    function add(){
        var table = document.getElementById("tab");    
        oneRow = table.insertRow();//插入一行  
        cell1= oneRow.insertCell();//单单插入一行是不管用的，需要插入单元格  
        cell2=oneRow.insertCell();  
        cell1.innerHTML =document.getElementById("xy").value;   
        cell2.innerHTML="<span onclick='deleteRow(this)'>删除</span>";
        }
    /* 点击删除事件 */
    function deleteRow(r){
        var i=r.parentNode.parentNode.rowIndex;
        document.getElementById('tab').deleteRow(i);
        }

猜你喜欢