>  기사  >  백엔드 개발  >  PHP는 Amap(1)을 사용하여 다각형을 그리고 편집하여 좌표를 얻습니다(간단한 요약).

PHP는 Amap(1)을 사용하여 다각형을 그리고 편집하여 좌표를 얻습니다(간단한 요약).

不言
不言원래의
2018-04-19 13:27:313602검색

이 글은 PHP Amap(1)을 사용하여 다각형을 그리고 편집하여 좌표를 얻는 내용을 소개합니다(간단한 요약). 이제 필요한 친구들이 참고할 수 있도록 공유합니다. Amap API를 처음 사용하는 경우 먼저 Amap 키를 신청해야 합니다.

주요 지침:

1. Amap 표시2. Amap 지도를 클릭하여 좌표를 가져옵니다
3. Amap 지도에서



4 . 다각형을 편집하고 좌표를 가져오는 Amap 마우스

<style>
    .map-list{float: left; margin-left: 10px;}
    .pbot10{ padding-bottom: 10px;}
    .marleft{ margin-left: 10px;}
    </style>
    <p class="panel panel-default">
        <p class="panel-body">        
        <p>            
        <p id="container" style="width: 70%; height: 500px; float: left;"></p>                
        <p style="margin-bottom: 5px;">                    
        <ul class="map-list-add">                        
        <?php 
        foreach ($oldRegionArr as $k => $v):
        ?>                            
        <li>
        [<?=$v;?>],
        </li>                        
        <?php endforeach;?>                    
        </ul>                    
        <ul class="map-list-hidden hidden">                        
        <?php foreach ($oldLngLatArr as $key => $val):?>                            
        <li>                                
        <?php foreach ($val as $k => $v):?>                                    
        <span><?=$v;?></span>                                
        <?php endforeach;?>                            
        </li>                        
        <?php endforeach;?>                    
        </ul>                    
        <textarea class="form-control hidden" name="region" rows="3">
        </textarea>                
        </p>                
        <a class="btn btn-primary btn-sm fl" id="clearMarker" onclick="clearMap()">清空所有
        </a>                
        <a class="btn btn-primary btn-sm fl marleft" id="huaMarker">生成抢修范围
        </a>                
        <br><br>                
        <a class="btn btn-primary btn-sm fl marleft" id="PolyEditor" onClick="startEditPolygon()">开始编辑抢修范围
        </a>                
        <a class="btn btn-primary btn-sm fl marleft" id="CircleEditor" onClick="closeEditPolygon()">结束编辑抢修范围
        </a>            
        </p>        
        </p>    
        </p>
        </p>
        </p>
        <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=高德key&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.CircleEditor">
        </script>
        <script type="text/javascript">    
        var city  = '济南';    
        //生成地图    
        var map = new AMap.Map('container',{        
        resizeEnable: true,        zoom: 13    
        });    
        //地图上添加工具    
        AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],        
        function() {
            map.addControl(new AMap.ToolBar());            
            map.addControl(new AMap.Scale());        
            });    
            //设置地图中心    
            var lngLat = map.getCenter();    
            var lng = lngLat.lng;    
            var lat = lngLat.lat;    
            if(city) {
        map.setCity("" + city + "");    
        } else {
        map.setCenter([lng, lat]);    
        }    
        //清空地图    
        function clearMap() 
        {
        map.clearMap();        
        $('.map-list-add').html('');        
        positions = [];        
        $('textarea[name=region]').val('');        
        $('.map-list-hidden').html('');    
        }    
        //点击地图获取坐标    
        function huaNew() 
        {        
        var positions = [];        
        //地图上点击事件        
        map.on('click', function(e)
         {            
         //显示点击的坐标            
         var lngLat = e.lnglat.getLng() + ',' + e.lnglat.getLat();            
         //将坐标填的 ul            
         var html = $('.map-list-add').html();            
         html += '<li>[' + lngLat + ']</li>';            
         positions.push([e.lnglat.getLng(), e.lnglat.getLat()]);            
         $('.map-list-add').html(html);        
         });    
         }    
         //画多边形的参数    
         var xian = {        
         strokeColor: "#FF33FF", //线颜色        
         strokeOpacity: 0.2, //线透明度        
         strokeWeight: 3,    //线宽        
         fillColor: "#1791fc", //填充色        
         fillOpacity: 0.35//填充透明度    
         };    
         //画多边形    
         var mouseTool = new AMap.MouseTool(map);   
         //在地图中添加MouseTool插件    
         AMap.event.addDomListener(document.getElementById('huaMarker'), 'click', function()
          {        
          clearMap();        
          huaNew();        
          mouseTool.polygon(xian);    
          }, false);    
          //默认加载的多边形    
          $(function () 
          {        
          var markers = [], positions = [];        
          var valRegion = '[116.97174,36.707879],[116.986675,36.681658],[116.983241,36.677665],[116.954059,36.675256],';        
          var len = $('.map-list-hidden li').length;        
          for(var p=0; p < len; p++) {            
          var posit = [];            
          var defaultLng = $('.map-list-hidden li:eq('+p+') span:eq(0)').html();            
          var defaultLat = $('.map-list-hidden li:eq('+p+') span:eq(1)').html();            
          posit.push(parseFloat(defaultLng));            
          posit.push(parseFloat(defaultLat));            
          positions.push(posit);        
          }        
          $('textarea[name=region]').val(valRegion);        
          //编辑多边形        
          var _polygon = (function(){            
          var arr = positions;            
          xian.path = positions;            
          xian.map = map;            
          return new AMap.Polygon(xian);        
          })();        
          //编辑多边形初始化        
          _polygonEditor = new AMap.PolyEditor(map, _polygon);        
          //开始编辑        
          startEditPolygon = function(){            
          _polygonEditor.open();        
          }        
          //结束编辑        
          closeEditPolygon = function(){            
          var html = '', htmlText = '';            
          _polygonEditor.close();            
          var a =  _polygon.getPath();            
          for(var q = 0; q < a.length; q++) {                
          var posit = [];                
          posit.push(parseFloat(a[q]['lng']));                
          posit.push(parseFloat(a[q]['lat']));                
          html += "<li>[" + posit + "],</li>";                
          htmlText += "[" + posit + "],";            
          }            
          $('.map-list-add').html(html);            
          $('textarea[name=region]').val(htmlText);        
          }
    });
    </script>




:

http:// lbs.ama p.com/api/javascript -api/guide/create-map/show-map 지도 표시


http://lbs.amap.com/api/javascript-api/guide/draw-on -map/marker-point 포인트 마크

http://lbs.amap.com/api/javascript-api/example/marker/marker-content 포인트 마크 예시

http://lbs.amap. com/api/javascript-api/example/overlayers/polyline-circle-polygon 폴리라인, 폴리곤, 원 예제


http://lbs.amap.com/api/javascript-api/example/mouse-operate- map/mouse-draw-overlayers 마우스 그리기 점 선 표면


http://lbs.amap.com/faq/web/javascript-api/327

마우스 도구는 오버레이를 그립니다. 위치/범위/를 얻는 방법 오버레이 경로?


http://lbs.amap.com/api/javascript-api/example/overlayers/edit-polyline-circle-polygon 폴리라인, 폴리곤, 원 편집


http://lbs. amap.com/faq/web/javascript-api/editpolygon-getpath

폴리곤을 편집한 후 경로를 얻는 방법은 무엇입니까?



위 내용은 PHP는 Amap(1)을 사용하여 다각형을 그리고 편집하여 좌표를 얻습니다(간단한 요약).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:PHP 파일 작업다음 기사:PHP 파일 작업