mysql - 在谷歌地图上显示数据多边形

标签 mysql xml google-maps

我有来自 mysql 数据库的 xml 结果,这是我从几何列中获得的。如何在谷歌地图上显示它?

这是我的 xml:

<markers><marker nama="Kantin Kantor PU" shape="POLYGON((108.10520178276263 -6.858956463258993,108.10520178276253 -6.858956463258993,108.10513271049714 -6.858932060738665,108.10513271049714 -6.858932060738665,108.10520128762313 -6.858728793499146,108.10532641063406 -6.858765330489725,108.10529010050418 -6.858891920569046,108.10523455423915 -6.858873694406815,108.10520178276263 -6.858956463258993))"/><marker nama="Musholla Kantor PU" shape="POLYGON((108.10501424072646 -6.858645877529082,108.10517988346642 -6.858710576798838,108.10514469280835 -6.858806700079676,108.1049818668431 -6.858740248357532,108.10501424072646 -6.858645877529082))"/><marker nama="Kantor PU" shape="POLYGON((108.10450388227768 -6.858584602250887,108.1047129457391 -6.858661753176697,108.10476416242028 -6.858545083343718,108.10499048034666 -6.85863059565397,108.10494154865009 -6.85875612647455,108.10513894636941 -6.85882888158234,108.1051032012809 -6.858939353555446,108.10479093159665 -6.858836414505629,108.10477568177342 -6.858883310653111,108.1047066273862 -6.858855959142133,108.10471758964786 -6.858822012938044,108.10445214913747 -6.858709329645384,108.10450388227768 -6.858584602250887))"/><marker nama="Staff Camp 1" shape="POLYGON((108.10815750285195 -6.856707372977074,108.10834964749397 -6.856678776003335,108.10836304921183 -6.856782124485497,108.10817351305123 -6.856814237806256,108.10815750285195 -6.856707372977074))"/><marker nama="Staff Camp 4" shape="POLYGON((108.1080728983 -6.857020012717328,108.1081224364644 -6.856949555407332,108.10816951117789 -6.85698234829542,108.10823149311256 -6.856906145493292,108.10831248952013 -6.856961754016501,108.10819526628923 -6.857113764614886,108.1080728983 -6.857020012717328))"/><marker nama="Staff Camp 4" shape="POLYGON((108.10804509681236 -6.857256968096555,108.10796326986842 -6.85719967918558,108.10809946302163 -6.85704652088626,108.10817244094869 -6.857103756429334,108.10804509681236 -6.857256968096555))"/><marker nama="Staff Camp 2" shape="POLYGON((108.10805100093653 -6.856913335280053,108.1080137391197 -6.856803305800256,108.10814039765984 -6.856763681236485,108.10817895415153 -6.856868670068977,108.10805100093653 -6.856913335280053))"/><marker nama="Staff Camp 3" shape="POLYGON((108.10797763942922 -6.856900418025635,108.10778367633219 -6.856990121755588,108.10774118268614 -6.856909089573384,108.10793011210849 -6.856815569156427,108.10797763942922 -6.856900418025635))"/><marker nama="Staff Camp 3" shape="POLYGON((108.10795451889614 -6.857170373445421,108.10781903432482 -6.856996645558901,108.10790280328476 -6.856941617030649,108.10802944648212 -6.857114029501284,108.10795451889614 -6.857170373445421))"/><marker nama="Kantor Consortium of Indonesian Contractors" shape="POLYGON((108.10707237696847 -6.858471570764101,108.10682606178935 -6.858465789067407,108.106828887715 -6.858354110166252,108.10707412056446 -6.858360959314671,108.10707237696847 -6.858471570764101))"/><marker nama="Kantor Kontraktor CIC" shape="POLYGON((108.10643101578393 -6.858265099509131,108.10651866149671 -6.858270114781809,108.10651229333384 -6.858408204460742,108.10662710716673 -6.858411659596372,108.10663474199808 -6.858292915495095,108.10672882002558 -6.858293482975881,108.10671209184487 -6.858543393985623,108.10641751469237 -6.858523660298001,108.10643101578393 -6.858265099509131))"/><marker nama="Klinik" shape="POLYGON((108.10620646627999 -6.858530812600331,108.10621651233723 -6.858417908643648,108.10633505002919 -6.858430309747142,108.10632523925617 -6.858504261847719,108.10629794230114 -6.858501759934654,108.10629382419921 -6.858537572164347,108.10620646627999 -6.858530812600331))"/><marker nama="Bangunan" shape="POLYGON((108.10644758761538 -6.858713684106015,108.10620105415273 -6.858766275330055,108.10600738311425 -6.858491436445505,108.10599738808529 -6.858243925660946,108.10610408754961 -6.858242930698272,108.10611588229908 -6.858464232399857,108.10622482528416 -6.858635319164995,108.10641929201886 -6.858596043929949,108.10644758761538 -6.858713684106015))"/><marker nama="Mes PU" shape="POLYGON((108.10860076843731 -6.856949038429142,108.10869421424349 -6.856817557822794,108.10874539339143 -6.85685057557548,108.10875517675484 -6.856835861575023,108.10879811051817 -6.856864376536732,108.10878765537205 -6.856880566012326,108.1088002728926 -6.85688733260564,108.10870414076831 -6.857023537698033,108.10868782267926 -6.857013031866025,108.10867872562932 -6.857026713649618,108.10862742318714 -6.856992640513975,108.10863848088628 -6.856976009954102,108.10860076843731 -6.856949038429142))"/><marker nama="Mes PU" shape="POLYGON((108.10855363708056 -6.85699300563047,108.10855501752394 -6.856990852016916,108.10860663691274 -6.857023902652556,108.10862742318713 -6.856992640513991,108.1086817356761 -6.857028712808234,108.10866571631541 -6.857052805607522,108.10868358112144 -6.85706467073257,108.10863449239488 -6.857135702870858,108.10851410369726 -6.857055745238593,108.10855363708056 -6.85699300563047))"/><marker nama="Mes PU" shape="POLYGON((108.10847154262005 -6.857116473966225,108.10851410369725 -6.857055745238593,108.10863449239488 -6.857135702870858,108.1085879831008 -6.857208448170648,108.10857011829476 -6.85719658304084,108.10855409892086 -6.857220675831543,108.10849978643185 -6.857184603517984,108.10852057272267 -6.857153341390067,108.10847009072756 -6.857118580126,108.10847154262005 -6.857116473966225))"/><marker nama="Mes PU" shape="POLYGON((108.1087238133462 -6.856765660142049,108.10876637435089 -6.856704931364765,108.10889032174347 -6.856787252459764,108.10884025384401 -6.856857634270871,108.10882238903723 -6.856845769153187,108.10880636969165 -6.856869861962866,108.10875205720038 -6.856833789686163,108.10877284345445 -6.856802527533623,108.10872236145623 -6.856767766303527,108.1087238133462 -6.856765660142049))"/><marker nama="Bangunan" shape="POLYGON((108.1089356074149 -6.857674755215398,108.1090145086846 -6.857734579941051,108.10875985021967 -6.858067708885999,108.1086875042263 -6.858016166552476,108.1089356074149 -6.857674755215398))"/><marker nama="Pos Security" shape="POLYGON((108.10818754713485 -6.857558925718839,108.10813593569624 -6.857515828141101,108.10817326141219 -6.857471178651869,108.10822487285273 -6.857514276225045,108.10818754713485 -6.857558925718839))"/><marker nama="Dining Hall" shape="POLYGON((108.10817942439397 -6.858205788868081,108.10820521604097 -6.858174349777118,108.10819822566596 -6.858168621506374,108.1082612718981 -6.85809177038395,108.10826826227381 -6.858097498653839,108.10832844274827 -6.858024140747613,108.10838436576151 -6.858069966895863,108.10831558807122 -6.858153804510966,108.10832257844824 -6.858159532780481,108.1082939210694 -6.858194465114611,108.10832887295635 -6.858223106464197,108.10835753033611 -6.858188174127646,108.10836452071423 -6.858193902396995,108.10843329840758 -6.858110064773795,108.10851019258367 -6.85817307572159,108.10849299816157 -6.858194035132478,108.10849998854219 -6.858199763400546,108.10847133116822 -6.858234695749655,108.10846434078778 -6.858228967481105,108.10836117420459 -6.858354723907119,108.10817942439397 -6.858205788868081))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10751845582358 -6.858666299630899,108.10747344726333 -6.858588157134914,108.10760412334581 -6.858512974533832,108.10764913193064 -6.858591117023736,108.10762860606935 -6.858602926285686,108.10763275515754 -6.858610129801964,108.10759953773098 -6.858629240971349,108.10759538864338 -6.858622037454929,108.10757219911838 -6.858635379212555,108.10757634820558 -6.858642582729075,108.10754313077561 -6.85866169389264,108.10753898168898 -6.858654490375976,108.10751845582358 -6.858666299630899))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10771332128213 -6.858553640683613,108.10766831268526 -6.858475498196738,108.1077989887212 -6.85840031551647,108.10784399734263 -6.858478457997264,108.10782347148867 -6.858490267271652,108.10782762058022 -6.858497470787089,108.10779440316549 -6.858516581976604,108.1077902540745 -6.858509378461023,108.10776706455778 -6.858522720232703,108.10777121364836 -6.858529923748383,108.10773799623021 -6.858549034932075,108.10773384714021 -6.858541831416252,108.10771332128213 -6.858553640683613))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10792370372906 -6.858430118264955,108.1078786950927 -6.858351975787985,108.10800937107774 -6.858276793022003,108.10805437973866 -6.858354935492891,108.10803385389269 -6.858366744780741,108.10803800298788 -6.858373948295268,108.1080047855861 -6.858393059506569,108.10800063649148 -6.858385855991902,108.10797744698378 -6.85839919777879,108.107981596078 -6.858406401293559,108.1079483786728 -6.858425512499037,108.10794422957915 -6.858418308984128,108.10792370372906 -6.858430118264955))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10813051802839 -6.858578613442385,108.1080855093463 -6.858500470965288,108.10810603519904 -6.858488661677149,108.1081018861023 -6.858481458162415,108.10813510351063 -6.858462346945367,108.10813925260796 -6.858469550459958,108.10816244211867 -6.858456208664806,108.10815829302094 -6.858449005150315,108.10819151042587 -6.858429893927477,108.10819565952417 -6.858437097441827,108.1082161853728 -6.858425288146646,108.10826119407947 -6.85850343061766,108.10813051802839 -6.858578613442385))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10792946749808 -6.858704000132273,108.10788445885353 -6.858625857645444,108.10790498471431 -6.858614048370304,108.10790083562105 -6.858606844854674,108.10793405304237 -6.858587733658665,108.10793820213622 -6.858594937174152,108.107961391656 -6.858581595393688,108.10795724256174 -6.8585743918783,108.10799045997967 -6.858555280676502,108.10799460907451 -6.858562484191748,108.10801513493116 -6.858550674909568,108.10806014360031 -6.858628817390319,108.10792946749808 -6.858704000132273))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10772044834428 -6.858824256350252,108.10767543973903 -6.858746113853669,108.10769596560762 -6.858734304591861,108.10769181651797 -6.858727101075331,108.10772503395194 -6.858707989900895,108.10772918304218 -6.858715193417283,108.10775237257079 -6.85870185165188,108.10774822348014 -6.858694648135591,108.10778144091071 -6.858675536955369,108.10778559000192 -6.858682740471513,108.10780611586641 -6.858670931202663,108.10785112449622 -6.858749073693165,108.10772044834428 -6.858824256350252))"/><marker nama="Gymnasium" shape="POLYGON((108.10771321481428 -6.858871725246066,108.10758394878981 -6.858946096519393,108.10749389423262 -6.858789746567302,108.10762316020846 -6.858715375306026,108.10771321481428 -6.858871725246066))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10974992343573 -6.857853980731092,108.10974992343573 -6.857853980731108,108.10969714644699 -6.85786647732561,108.10969339537392 -6.85785065307503,108.1096265445234 -6.857866482085091,108.1096302955939 -6.857882306335331,108.10957540752452 -6.857895302777052,108.10955040040228 -6.857789807778794,108.10955040040228 -6.857789807778794,108.10959438121608 -6.857779393962338,108.1095985490715 -6.857796976462129,108.10968510331575 -6.857776482057701,108.1096809354567 -6.857758899557411,108.10972491626949 -6.857748485726593,108.10974992343573 -6.857853980731092))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.1093231075515 -6.857843626305028,108.10936708836694 -6.857833212513609,108.10937125621282 -6.857850795012046,108.1094578104603 -6.857830300656887,108.10945364261079 -6.857812718157949,108.10949762342523 -6.857802304352168,108.10952263053422 -6.857907799348556,108.10946985354349 -6.857920295913017,108.10946610247903 -6.857904471663654,108.10939925162597 -6.857920300635663,108.10940300268791 -6.857936124884683,108.10934811461647 -6.857949121295162,108.1093231075515 -6.857843626305028))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10907294883917 -6.857909354514245,108.10911692965708 -6.857898940750629,108.1091210974924 -6.857916523247595,108.10920765174475 -6.85789602894716,108.10920348390577 -6.857878446449693,108.1092474647227 -6.857868032671715,108.1092724717684 -6.857973527659277,108.10921969477472 -6.857986024190369,108.10921594371975 -6.857970199942334,108.10914909286296 -6.857986028872076,108.10915284391538 -6.85800185311977,108.10909795584087 -6.858014849495546,108.10907294883917 -6.857909354514245))"/><marker nama="Masjid Al-Anhar" shape="POLYGON((108.1061806975529 -6.85827523447003,108.1062977435162 -6.858283866449771,108.10628444554129 -6.858414280455624,108.10617152981955 -6.858404826902709,108.1061806975529 -6.85827523447003))"/><marker nama="Tiang Bendera" shape="POLYGON((108.10839134346483 -6.857479602531199,108.10841215391136 -6.857496981331628,108.10838896924093 -6.857524713112782,108.10836815879487 -6.857507334311209,108.10839134346483 -6.857479602531199))"/><marker nama="Kantor Sinohydro" shape="POLYGON((108.10838976224777 -6.857755734532572,108.10847581114056 -6.857827528228153,108.10854996216237 -6.857738753112981,108.10854302273239 -6.857732963302215,108.10858009822171 -6.857688575748687,108.108587037652 -6.857694365558876,108.108661188609 -6.857605590433174,108.10857513968001 -6.857533796799799,108.10864002173759 -6.857456118558948,108.10882877427548 -6.857613601332298,108.10875462333682 -6.857702376496417,108.10872964137744 -6.857681533185109,108.10869951755092 -6.857717598087097,108.10873282682962 -6.85774538917111,108.10862623478525 -6.857873003417235,108.10859292551007 -6.85784521232481,108.10856280166134 -6.857881277209358,108.10858778361658 -6.857902120530524,108.108513633985 -6.857990893938892,108.10832488010273 -6.857833412704665,108.10838976224777 -6.857755734532572))"/><marker nama="Parking Area" shape="POLYGON((108.10852128024158 -6.857279674652287,108.10862570996738 -6.857366802921176,108.10858515900462 -6.857415352084032,108.10848072897286 -6.857328223546388,108.10852128024158 -6.857279674652287))"/><marker nama="Lapangan Basket Sinohydro" shape="POLYGON((108.10796923567426 -6.858113143061654,108.10815077629408 -6.857897417819998,108.10827800476237 -6.858003359435287,108.10809747207513 -6.858219924071995,108.10796923567426 -6.858113143061654))"/></markers>

最佳答案

您需要将“众所周知的文本”(WKT) POLYGON 解析为 google.maps.LatLng 对象数组,然后使用它们来设置 google.maps.Polygon 的路径

下面的代码来自相关问题 Convert Well-known text (WKT) from MySQL to Google Maps polygons with PHP ,修改为反转纬度和经度,对我有用:

// from https://stackoverflow.com/questions/16482303/convert-well-known-text-wkt-from-mysql-to-google-maps-polygons-with-php/16502322#16502322
// but with latitude and longitude reversed
function parsePolyStrings(ps) {
    var i, j, lat, lng, tmp, tmpArr,
        arr = [],
        //match '(' and ')' plus contents between them which contain anything other than '(' or ')'
        m = ps.match(/\([^\(\)]+\)/g);
    if (m !== null) {
        for (i = 0; i < m.length; i++) {
            //match all numeric strings
            tmp = m[i].match(/-?\d+\.?\d*/g);
            if (tmp !== null) {
                //convert all the coordinate sets in tmp from strings to Numbers and convert to LatLng objects
                for (j = 0, tmpArr = []; j < tmp.length; j+=2) {
                    lng = Number(tmp[j]);
                    lat = Number(tmp[j + 1]);
                    tmpArr.push(new google.maps.LatLng(lat, lng));
                }
                arr.push(tmpArr);
            }
        }
    }
    //array of arrays of LatLng objects, or empty array
    return arr;
}

proof of concept fiddle screen shot of polygons on Google Map

代码片段:

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var xml = parseXml(xmlStr);
  var markers = xml.getElementsByTagName("marker");
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    var polygonStr = markers[i].getAttribute("shape");
    if (polygonStr.indexOf("POLYGON") != -1) {
      var paths = parsePolyStrings(polygonStr);
      for (var j = 0; j < paths[0].length; j++) {
        bounds.extend(paths[0][j]);
      }
      var poly = new google.maps.Polygon({
        paths: paths,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
      });
      poly.setMap(map);
    }
  }
  map.fitBounds(bounds);
}
// from https://stackoverflow.com/questions/16482303/convert-well-known-text-wkt-from-mysql-to-google-maps-polygons-with-php/16502322#16502322
// but with latitude and longitude reversed
function parsePolyStrings(ps) {
  var i, j, lat, lng, tmp, tmpArr,
    arr = [],
    //match '(' and ')' plus contents between them which contain anything other than '(' or ')'
    m = ps.match(/\([^\(\)]+\)/g);
  if (m !== null) {
    for (i = 0; i < m.length; i++) {
      //match all numeric strings
      tmp = m[i].match(/-?\d+\.?\d*/g);
      if (tmp !== null) {
        //convert all the coordinate sets in tmp from strings to Numbers and convert to LatLng objects
        for (j = 0, tmpArr = []; j < tmp.length; j += 2) {
          lng = Number(tmp[j]);
          lat = Number(tmp[j + 1]);
          tmpArr.push(new google.maps.LatLng(lat, lng));
        }
        arr.push(tmpArr);
      }
    }
  }
  //array of arrays of LatLng objects, or empty array
  return arr;
}
google.maps.event.addDomListener(window, "load", initialize);

function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser).parseFromString(str, 'text/xml');
  }
}
var xmlStr = '<markers><marker nama="Kantin Kantor PU" shape="POLYGON((108.10520178276263 -6.858956463258993,108.10520178276253 -6.858956463258993,108.10513271049714 -6.858932060738665,108.10513271049714 -6.858932060738665,108.10520128762313 -6.858728793499146,108.10532641063406 -6.858765330489725,108.10529010050418 -6.858891920569046,108.10523455423915 -6.858873694406815,108.10520178276263 -6.858956463258993))"/><marker nama="Musholla Kantor PU" shape="POLYGON((108.10501424072646 -6.858645877529082,108.10517988346642 -6.858710576798838,108.10514469280835 -6.858806700079676,108.1049818668431 -6.858740248357532,108.10501424072646 -6.858645877529082))"/><marker nama="Kantor PU" shape="POLYGON((108.10450388227768 -6.858584602250887,108.1047129457391 -6.858661753176697,108.10476416242028 -6.858545083343718,108.10499048034666 -6.85863059565397,108.10494154865009 -6.85875612647455,108.10513894636941 -6.85882888158234,108.1051032012809 -6.858939353555446,108.10479093159665 -6.858836414505629,108.10477568177342 -6.858883310653111,108.1047066273862 -6.858855959142133,108.10471758964786 -6.858822012938044,108.10445214913747 -6.858709329645384,108.10450388227768 -6.858584602250887))"/><marker nama="Staff Camp 1" shape="POLYGON((108.10815750285195 -6.856707372977074,108.10834964749397 -6.856678776003335,108.10836304921183 -6.856782124485497,108.10817351305123 -6.856814237806256,108.10815750285195 -6.856707372977074))"/><marker nama="Staff Camp 4" shape="POLYGON((108.1080728983 -6.857020012717328,108.1081224364644 -6.856949555407332,108.10816951117789 -6.85698234829542,108.10823149311256 -6.856906145493292,108.10831248952013 -6.856961754016501,108.10819526628923 -6.857113764614886,108.1080728983 -6.857020012717328))"/><marker nama="Staff Camp 4" shape="POLYGON((108.10804509681236 -6.857256968096555,108.10796326986842 -6.85719967918558,108.10809946302163 -6.85704652088626,108.10817244094869 -6.857103756429334,108.10804509681236 -6.857256968096555))"/><marker nama="Staff Camp 2" shape="POLYGON((108.10805100093653 -6.856913335280053,108.1080137391197 -6.856803305800256,108.10814039765984 -6.856763681236485,108.10817895415153 -6.856868670068977,108.10805100093653 -6.856913335280053))"/><marker nama="Staff Camp 3" shape="POLYGON((108.10797763942922 -6.856900418025635,108.10778367633219 -6.856990121755588,108.10774118268614 -6.856909089573384,108.10793011210849 -6.856815569156427,108.10797763942922 -6.856900418025635))"/><marker nama="Staff Camp 3" shape="POLYGON((108.10795451889614 -6.857170373445421,108.10781903432482 -6.856996645558901,108.10790280328476 -6.856941617030649,108.10802944648212 -6.857114029501284,108.10795451889614 -6.857170373445421))"/><marker nama="Kantor Consortium of Indonesian Contractors" shape="POLYGON((108.10707237696847 -6.858471570764101,108.10682606178935 -6.858465789067407,108.106828887715 -6.858354110166252,108.10707412056446 -6.858360959314671,108.10707237696847 -6.858471570764101))"/><marker nama="Kantor Kontraktor CIC" shape="POLYGON((108.10643101578393 -6.858265099509131,108.10651866149671 -6.858270114781809,108.10651229333384 -6.858408204460742,108.10662710716673 -6.858411659596372,108.10663474199808 -6.858292915495095,108.10672882002558 -6.858293482975881,108.10671209184487 -6.858543393985623,108.10641751469237 -6.858523660298001,108.10643101578393 -6.858265099509131))"/><marker nama="Klinik" shape="POLYGON((108.10620646627999 -6.858530812600331,108.10621651233723 -6.858417908643648,108.10633505002919 -6.858430309747142,108.10632523925617 -6.858504261847719,108.10629794230114 -6.858501759934654,108.10629382419921 -6.858537572164347,108.10620646627999 -6.858530812600331))"/><marker nama="Bangunan" shape="POLYGON((108.10644758761538 -6.858713684106015,108.10620105415273 -6.858766275330055,108.10600738311425 -6.858491436445505,108.10599738808529 -6.858243925660946,108.10610408754961 -6.858242930698272,108.10611588229908 -6.858464232399857,108.10622482528416 -6.858635319164995,108.10641929201886 -6.858596043929949,108.10644758761538 -6.858713684106015))"/><marker nama="Mes PU" shape="POLYGON((108.10860076843731 -6.856949038429142,108.10869421424349 -6.856817557822794,108.10874539339143 -6.85685057557548,108.10875517675484 -6.856835861575023,108.10879811051817 -6.856864376536732,108.10878765537205 -6.856880566012326,108.1088002728926 -6.85688733260564,108.10870414076831 -6.857023537698033,108.10868782267926 -6.857013031866025,108.10867872562932 -6.857026713649618,108.10862742318714 -6.856992640513975,108.10863848088628 -6.856976009954102,108.10860076843731 -6.856949038429142))"/><marker nama="Mes PU" shape="POLYGON((108.10855363708056 -6.85699300563047,108.10855501752394 -6.856990852016916,108.10860663691274 -6.857023902652556,108.10862742318713 -6.856992640513991,108.1086817356761 -6.857028712808234,108.10866571631541 -6.857052805607522,108.10868358112144 -6.85706467073257,108.10863449239488 -6.857135702870858,108.10851410369726 -6.857055745238593,108.10855363708056 -6.85699300563047))"/><marker nama="Mes PU" shape="POLYGON((108.10847154262005 -6.857116473966225,108.10851410369725 -6.857055745238593,108.10863449239488 -6.857135702870858,108.1085879831008 -6.857208448170648,108.10857011829476 -6.85719658304084,108.10855409892086 -6.857220675831543,108.10849978643185 -6.857184603517984,108.10852057272267 -6.857153341390067,108.10847009072756 -6.857118580126,108.10847154262005 -6.857116473966225))"/><marker nama="Mes PU" shape="POLYGON((108.1087238133462 -6.856765660142049,108.10876637435089 -6.856704931364765,108.10889032174347 -6.856787252459764,108.10884025384401 -6.856857634270871,108.10882238903723 -6.856845769153187,108.10880636969165 -6.856869861962866,108.10875205720038 -6.856833789686163,108.10877284345445 -6.856802527533623,108.10872236145623 -6.856767766303527,108.1087238133462 -6.856765660142049))"/><marker nama="Bangunan" shape="POLYGON((108.1089356074149 -6.857674755215398,108.1090145086846 -6.857734579941051,108.10875985021967 -6.858067708885999,108.1086875042263 -6.858016166552476,108.1089356074149 -6.857674755215398))"/><marker nama="Pos Security" shape="POLYGON((108.10818754713485 -6.857558925718839,108.10813593569624 -6.857515828141101,108.10817326141219 -6.857471178651869,108.10822487285273 -6.857514276225045,108.10818754713485 -6.857558925718839))"/><marker nama="Dining Hall" shape="POLYGON((108.10817942439397 -6.858205788868081,108.10820521604097 -6.858174349777118,108.10819822566596 -6.858168621506374,108.1082612718981 -6.85809177038395,108.10826826227381 -6.858097498653839,108.10832844274827 -6.858024140747613,108.10838436576151 -6.858069966895863,108.10831558807122 -6.858153804510966,108.10832257844824 -6.858159532780481,108.1082939210694 -6.858194465114611,108.10832887295635 -6.858223106464197,108.10835753033611 -6.858188174127646,108.10836452071423 -6.858193902396995,108.10843329840758 -6.858110064773795,108.10851019258367 -6.85817307572159,108.10849299816157 -6.858194035132478,108.10849998854219 -6.858199763400546,108.10847133116822 -6.858234695749655,108.10846434078778 -6.858228967481105,108.10836117420459 -6.858354723907119,108.10817942439397 -6.858205788868081))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10751845582358 -6.858666299630899,108.10747344726333 -6.858588157134914,108.10760412334581 -6.858512974533832,108.10764913193064 -6.858591117023736,108.10762860606935 -6.858602926285686,108.10763275515754 -6.858610129801964,108.10759953773098 -6.858629240971349,108.10759538864338 -6.858622037454929,108.10757219911838 -6.858635379212555,108.10757634820558 -6.858642582729075,108.10754313077561 -6.85866169389264,108.10753898168898 -6.858654490375976,108.10751845582358 -6.858666299630899))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10771332128213 -6.858553640683613,108.10766831268526 -6.858475498196738,108.1077989887212 -6.85840031551647,108.10784399734263 -6.858478457997264,108.10782347148867 -6.858490267271652,108.10782762058022 -6.858497470787089,108.10779440316549 -6.858516581976604,108.1077902540745 -6.858509378461023,108.10776706455778 -6.858522720232703,108.10777121364836 -6.858529923748383,108.10773799623021 -6.858549034932075,108.10773384714021 -6.858541831416252,108.10771332128213 -6.858553640683613))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10792370372906 -6.858430118264955,108.1078786950927 -6.858351975787985,108.10800937107774 -6.858276793022003,108.10805437973866 -6.858354935492891,108.10803385389269 -6.858366744780741,108.10803800298788 -6.858373948295268,108.1080047855861 -6.858393059506569,108.10800063649148 -6.858385855991902,108.10797744698378 -6.85839919777879,108.107981596078 -6.858406401293559,108.1079483786728 -6.858425512499037,108.10794422957915 -6.858418308984128,108.10792370372906 -6.858430118264955))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10813051802839 -6.858578613442385,108.1080855093463 -6.858500470965288,108.10810603519904 -6.858488661677149,108.1081018861023 -6.858481458162415,108.10813510351063 -6.858462346945367,108.10813925260796 -6.858469550459958,108.10816244211867 -6.858456208664806,108.10815829302094 -6.858449005150315,108.10819151042587 -6.858429893927477,108.10819565952417 -6.858437097441827,108.1082161853728 -6.858425288146646,108.10826119407947 -6.85850343061766,108.10813051802839 -6.858578613442385))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10792946749808 -6.858704000132273,108.10788445885353 -6.858625857645444,108.10790498471431 -6.858614048370304,108.10790083562105 -6.858606844854674,108.10793405304237 -6.858587733658665,108.10793820213622 -6.858594937174152,108.107961391656 -6.858581595393688,108.10795724256174 -6.8585743918783,108.10799045997967 -6.858555280676502,108.10799460907451 -6.858562484191748,108.10801513493116 -6.858550674909568,108.10806014360031 -6.858628817390319,108.10792946749808 -6.858704000132273))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10772044834428 -6.858824256350252,108.10767543973903 -6.858746113853669,108.10769596560762 -6.858734304591861,108.10769181651797 -6.858727101075331,108.10772503395194 -6.858707989900895,108.10772918304218 -6.858715193417283,108.10775237257079 -6.85870185165188,108.10774822348014 -6.858694648135591,108.10778144091071 -6.858675536955369,108.10778559000192 -6.858682740471513,108.10780611586641 -6.858670931202663,108.10785112449622 -6.858749073693165,108.10772044834428 -6.858824256350252))"/><marker nama="Gymnasium" shape="POLYGON((108.10771321481428 -6.858871725246066,108.10758394878981 -6.858946096519393,108.10749389423262 -6.858789746567302,108.10762316020846 -6.858715375306026,108.10771321481428 -6.858871725246066))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10974992343573 -6.857853980731092,108.10974992343573 -6.857853980731108,108.10969714644699 -6.85786647732561,108.10969339537392 -6.85785065307503,108.1096265445234 -6.857866482085091,108.1096302955939 -6.857882306335331,108.10957540752452 -6.857895302777052,108.10955040040228 -6.857789807778794,108.10955040040228 -6.857789807778794,108.10959438121608 -6.857779393962338,108.1095985490715 -6.857796976462129,108.10968510331575 -6.857776482057701,108.1096809354567 -6.857758899557411,108.10972491626949 -6.857748485726593,108.10974992343573 -6.857853980731092))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.1093231075515 -6.857843626305028,108.10936708836694 -6.857833212513609,108.10937125621282 -6.857850795012046,108.1094578104603 -6.857830300656887,108.10945364261079 -6.857812718157949,108.10949762342523 -6.857802304352168,108.10952263053422 -6.857907799348556,108.10946985354349 -6.857920295913017,108.10946610247903 -6.857904471663654,108.10939925162597 -6.857920300635663,108.10940300268791 -6.857936124884683,108.10934811461647 -6.857949121295162,108.1093231075515 -6.857843626305028))"/><marker nama="Mes Sinohydro" shape="POLYGON((108.10907294883917 -6.857909354514245,108.10911692965708 -6.857898940750629,108.1091210974924 -6.857916523247595,108.10920765174475 -6.85789602894716,108.10920348390577 -6.857878446449693,108.1092474647227 -6.857868032671715,108.1092724717684 -6.857973527659277,108.10921969477472 -6.857986024190369,108.10921594371975 -6.857970199942334,108.10914909286296 -6.857986028872076,108.10915284391538 -6.85800185311977,108.10909795584087 -6.858014849495546,108.10907294883917 -6.857909354514245))"/><marker nama="Masjid Al-Anhar" shape="POLYGON((108.1061806975529 -6.85827523447003,108.1062977435162 -6.858283866449771,108.10628444554129 -6.858414280455624,108.10617152981955 -6.858404826902709,108.1061806975529 -6.85827523447003))"/><marker nama="Tiang Bendera" shape="POLYGON((108.10839134346483 -6.857479602531199,108.10841215391136 -6.857496981331628,108.10838896924093 -6.857524713112782,108.10836815879487 -6.857507334311209,108.10839134346483 -6.857479602531199))"/><marker nama="Kantor Sinohydro" shape="POLYGON((108.10838976224777 -6.857755734532572,108.10847581114056 -6.857827528228153,108.10854996216237 -6.857738753112981,108.10854302273239 -6.857732963302215,108.10858009822171 -6.857688575748687,108.108587037652 -6.857694365558876,108.108661188609 -6.857605590433174,108.10857513968001 -6.857533796799799,108.10864002173759 -6.857456118558948,108.10882877427548 -6.857613601332298,108.10875462333682 -6.857702376496417,108.10872964137744 -6.857681533185109,108.10869951755092 -6.857717598087097,108.10873282682962 -6.85774538917111,108.10862623478525 -6.857873003417235,108.10859292551007 -6.85784521232481,108.10856280166134 -6.857881277209358,108.10858778361658 -6.857902120530524,108.108513633985 -6.857990893938892,108.10832488010273 -6.857833412704665,108.10838976224777 -6.857755734532572))"/><marker nama="Parking Area" shape="POLYGON((108.10852128024158 -6.857279674652287,108.10862570996738 -6.857366802921176,108.10858515900462 -6.857415352084032,108.10848072897286 -6.857328223546388,108.10852128024158 -6.857279674652287))"/><marker nama="Lapangan Basket Sinohydro" shape="POLYGON((108.10796923567426 -6.858113143061654,108.10815077629408 -6.857897417819998,108.10827800476237 -6.858003359435287,108.10809747207513 -6.858219924071995,108.10796923567426 -6.858113143061654))"/></markers>';
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

关于mysql - 在谷歌地图上显示数据多边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44877311/

相关文章:

javascript - 添加标记后更改标记的 anchor

php - MySQL 空间扩展和 PHP

mysql - 查询mysql获取max和group by

php - 使用 PHP 和 PDO 重定向链接

php - mysql 使用 laravel php 检查数据库中的用户名和密码是否匹配

xml - 前缀 '' 不能在同一起始元素标记内从 '' 重新定义为 'http://www.sitemaps.org/schemas/sitemap/0.9'

objective-c - 解析 XML CDATA block

php - Mysql获取日期为本月的元组

Python XML 随机赋值

google-maps - 在 phonegap 应用程序中向地理 URI 添加标记