php 使用高德地圖(一) 畫多邊形及編輯獲取坐標 (簡單總結)

2020-03-22 18:46:41

字體：大中小

來源：轉載

供稿：網友

這篇文章介紹的內容是關于php 使用高德地圖(一) 畫多邊形及編輯獲取坐標 (簡單總結)，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

首次使用高德api的話要先申請一個高德的key
主要說明:
1. 高德地圖展示
2. 高德地圖點擊獲取坐標
3. 高德地圖鼠標繪制多邊形

4. 高德地圖鼠標編輯多邊形并獲取坐標

<style>    .map-list{float: left; margin-left: 10px;}    .pbot10{ padding-bottom: 10px;}    .marleft{ margin-left: 10px;}    </style>    <p html' target='_blank'>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>