PHP using the High German map (a) draw polygons and edit to get coordinates (simple summary)

This article describes the content of PHP using the high-D map (a) draw polygons and edit the coordinates (simple summary), has a certain reference value, now share to everyone, the need for friends can refer to

First use of the high-German API, you need to apply for a high-German key
Main Description:
1. German map display
2. Gold map Click to get coordinates
3. Gold Map Mouse Draw polygon

4. German map mouse edit polygon and get coordinates

<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&                                        Gt<?php foreach ($val as $k = $v):?> <span><?= $v;? ></span> <?php Endforeach;? > </li> <?php endforeach;? > </ul> <textarea class= "Form-control hidden" name= "Regi On "rows=" 3 "> </textarea> </p> <a class=" Btn BTN-PR Imary btn-sm fl "id=" Clearmarker "onclick=" Clearmap () "> Clear all </a> <a class=" Btn b                        Tn-primary btn-sm fl Marleft "id=" Huamarker "> Generate repair Range </a> <br><br>         <a class= "btn btn-primary btn-sm fl marleft" id= "Polyeditor" onclick= "Starteditpolygon ()" > Start editing Rush repair scope </a> <a class= "btn btn-primary btn-sm fl marleft" id= "CircLeeditor "onclick=" Closeeditpolygon () > End edit Rush Repair range </a> </p> &LT;/P&G            T </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> &LT;SC            Ript type= "Text/javascript" > var city = ' Jinan ';            Generate the map var map = new Amap.map (' container ', {resizeenable:true, zoom:13});            Add Tools on the map amap.plugin ([' Amap.toolbar ', ' amap.scale ', ' amap.overview '], function () {                        Map.addcontrol (New Amap.toolbar ());                    Map.addcontrol (New Amap.scale ());                });                Set Map Center var Lnglat = Map.getcenter ();                var lng = LNGLAT.LNG;                var lat = Lnglat.lat; if (city) {MAP.SEtcity ("+ City +");            } else {Map.setcenter ([LNG, LAT]);                }//Empty map function Clearmap () {map.clearmap ();                $ ('. Map-list-add '). html (');                positions = [];                $ (' textarea[name=region] '). Val (');            $ ('. Map-list-hidden '). html (');                }//Click map to get coordinates function huanew () {var positions = []; Click on the map on the event map.on (' click ', Function (e) {//display the coordinates of the click var Lngla                     t = e.lnglat.getlng () + ', ' + E.lnglat.getlat ();                     The coordinates are filled with the UL var html = $ ('. Map-list-add '). html ();                     HTML + = ' <li>[' + Lnglat + ']</li> ';                     Positions.push ([E.lnglat.getlng (), E.lnglat.getlat ()]);                 $ ('. Map-list-add '). HTML (HTML);             }); }//Draw polygon parameters Var Xian = {strokecolor: "#FF33FF",//Line Color strokeopacity:0.2,//Line Transparency Strokeweig             Ht:3,//Line width FillColor: "#1791fc",//Fill color fillopacity:0.35//fill transparency};            Draw polygon var mousetool = new Amap.mousetool (map);          Add Mousetool plugin AMap.event.addDomListener (document.getElementById (' Huamarker '), ' click ', Function () in the map                  {Clearmap ();                  Huanew ();              Mousetool.polygon (Xian);              }, False);                  The default loaded polygon $ (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);                      Edit poly var _polygon = (function () {var arr = positions;                      Xian.path = positions;                      Xian.map = map;                  return new Amap.polygon (Xian);                  })();                  Edit Polygon Initialization _polygoneditor = new Amap.polyeditor (map, _polygon);                  Start editing Starteditpolygon = function () {_polygoneditor.open (); }//End Edit 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>

Reference:

Http://lbs.amap.com/api/javascript-api/guide/create-map/show-map Show Map

Http://lbs.amap.com/api/javascript-api/guide/draw-on-map/marker-point Point Callout

Http://lbs.amap.com/api/javascript-api/example/marker/marker-content Point Callout Example

Http://lbs.amap.com/api/javascript-api/example/overlayers/polyline-circle-polygon polyline, polygon, circle example

Http://lbs.amap.com/api/javascript-api/example/mouse-operate-map/mouse-draw-overlayers the mouse to draw a point line face

http://lbs.amap.com/faq/web/javascript-api/327 the mouse tool to draw the cover, how to get the cover of the location/range/path?

Http://lbs.amap.com/api/javascript-api/example/overlayers/edit-polyline-circle-polygon editing polylines, polygons, circles

Http://lbs.amap.com/faq/web/javascript-api/editpolygon-getpath How to get the path of a polygon after editing a polygon?