php 使用高德地图(一) 画多边形及编辑 获取坐标 (简单总结)

<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>