Google地图仅显示PA状态

本文介绍了Google地图仅显示PA状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用JavaScript Google Maps API，并且希望将地图的显示区域限制为仅显示PA.我目前有一些kml数据用于显示PA中的县线.现在，我只需要使用户保持在PA状态即可.如何在javascript中对地图设置限制?

I am working with the javascript Google maps API and I am looking to restrict the viewing area of the map to only show PA. I currently have some kml data being used to display the county lines in PA. Now I just need to keep the user within the state of PA. How do I go about setting a restriction on the map in javascript?

我查找了有关漏洞的其他帖子?就像将PA从地图上切出一样，世界其他地方是一个多边形，其颜色发生了变化，然后PA仍然是主要焦点.我不知道如何实现这样的功能.我对使用Google Maps API感到很陌生.

I have looked up other posts regarding holes? Like cutting PA out of the map and the rest of the world is a polygon that gets its colored changed and then PA is still the main focus. I have no idea how to implement such a feature though. I am very new with working with Google Maps API.

推荐答案

获取该州边界的地理坐标源(一个源为 http://www.gadm.org ).
反转该多边形(示例)，并将其显示在Google Maps Javascript API v3地图上(请注意，KmlLayer似乎没有处理带有孔的KML，因此该示例使用了第三方KML解析器.
将地图限制在宾夕法尼亚州范围内

get a source for the geographic coordinates for the state's boundaries (One source would be http://www.gadm.org).
Invert that polygon (example) and display it on a Google Maps Javascript API v3 map (note that KmlLayer doesn't seem to handle KML with holes, so the example uses a third party KML parser).
Restrict the map to the area of Pennsylvania

概念提琴证明

代码段(状态多边形简化为适合):

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      minZoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(39.719429, -80.519562),
    new google.maps.LatLng(42.267879, -74.690033));
  google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    var geoxml = new geoXML3.parser({
      map: map,
      zoom: false,
      suppressInfoWindows: true,
    });
    geoxml.parseKmlString(PAstr);
    var lastCenter = bounds.getCenter();
    var polygon = new google.maps.Polygon({
      path: geoxml.docs[0].gpolygons[0].getPaths().getAt(1)
    });
    google.maps.event.addListener(map, 'center_changed', function() {
      var center = map.getCenter();
      if (!google.maps.geometry.poly.containsLocation(center, polygon)) {
        map.setCenter(lastCenter);
      } else {
        lastCenter = center;
      }
    });
  });
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var PAstr = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://earth.google.com/kml/2.2"><Document><name>United States divisions. Level 1</name><description><![CDATA[<a href="http://www.gadm.org">GADM</a> boundaries.]]></description><Style id="14"><LineStyle><width>1.5</width><color>ff000000</color></LineStyle><PolyStyle><color>FF6E6E6E</color><fill>1</fill></PolyStyle></Style><Placemark><name>Pennsylvania</name><description><![CDATA[State]]></description><styleUrl>#14</styleUrl><visibility>1</visibility><MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>180,85 90,85 0,85 -90,85 -180,85 -180,0 -180,-85 -90,-85 0,-85 90,-85 180,-85 180,0 180,85</coordinates></LinearRing></outerBoundaryIs><innerBoundaryIs><LinearRing><coordinates>-79.7624969482421,42.2678794860841 -79.7633285522461,42.1857109069827 -79.7627868652343,42.0479621887208 -79.7625885009766,42.0206985473635 -79.7624206542968,41.9984512329102 -79.6110916137694,41.99813079834 -79.5225830078124,41.9979400634767 -79.2611694335937,41.9980888366699 -79.1505813598633,41.9985389709475 -79.0634460449219,41.9986991882325 -78.9991912841796,41.998649597168 -78.9788131713866,41.9985809326172 -78.9694213867187,41.998561859131 -78.9465789794921,41.9988212585449 -78.9441986083984,41.9988021850587 -78.922492980957,41.9987907409671 -78.7538909912109,41.9986915588379 -78.7409210205078,41.9986801147462 -78.6284790039062,41.9990615844728 -78.4834060668945,41.9995422363281 -78.3443069458007,41.9997291564943 -78.3060302734375,42.0001220703126 -78.2905731201172,41.9997901916504 -78.2265167236328,41.9998817443848 -78.2086181640624,41.9999809265137 -77.9942932128906,41.9989509582521 -77.9662170410156,41.9988098144534 -77.8686218261718,41.9989204406741 -77.7512664794922,41.9990386962892 -77.7030868530273,41.9990921020507 -77.688362121582,41.9991989135744 -77.6096191406249,41.9997901916504 -77.4394073486328,42.0010490417482 -77.1767425537108,42.000171661377 -77.113296508789,42.0009918212892 -76.965103149414,42.0023117065431 -76.9291076660156,42.0024108886719 -76.9095230102538,42.0024719238282 -76.8965530395507,42.0026092529297 -76.6476364135742,42.001880645752 -76.6334381103514,42.001720428467 -76.5963821411133,42.0013122558594 -76.5618438720703,42.000919342041 -76.55313873291,42.0008316040039 -76.5228729248046,42.0004920959474 -76.4660491943359,41.9998512268067 -76.3826065063476,41.9989204406741 -76.1466979980469,41.9991302490234 -76.1165161132812,41.9991607666016 -76.1060333251953,41.9990615844728 -75.8490295410156,41.9986610412598 -75.7614364624023,41.9986991882325 -75.6029205322266,41.9987716674805 -75.6015090942383,41.9987716674805 -75.5984268188477,41.998779296875 -75.4833908081054,41.9989700317383 -75.3545074462891,41.9991912841799 -75.3483428955078,41.9969100952151 -75.34464263916,41.9946403503418 -75.342788696289,41.9928207397461 -75.3403320312499,41.990089416504 -75.3398513793945,41.9870719909669 -75.3393020629882,41.9847908020022 -75.3391265869141,41.9825401306153 -75.3400497436523,41.9807090759277 -75.3406372070311,41.9798889160156 -75.3413391113281,41.9789199829102 -75.3422088623047,41.9769287109376 -75.3418579101562,41.9753417968751 -75.3410568237305,41.9741287231445 -75.339859008789,41.97274017334 -75.3385162353515,41.9714698791504 -75.3360366821288,41.9706497192384 -75.3342132568359,41.9697189331054 -75.3305130004882,41.9682807922364 -75.3248672485351,41.9647903442383 -75.3203277587889,41.9594917297364 -75.3184585571289,41.9573097229004 -75.3167572021484,41.9553413391113 -75.3143920898437,41.9521217346191 -75.3125839233398,41.9507293701172 -75.310188293457,41.9500885009766 -75.3083724975585,41.9494209289551 -75.3077163696288,41.9491806030273 -75.304588317871,41.9496917724609 -75.3027801513671,41.9505310058594 -75.3003082275391,41.9518890380862 -75.2979278564453,41.9528999328613 -75.2959823608398,41.9532508850098 -75.2941360473633,41.9532508850098 -75.2927932739258,41.9522094726562 -75.2922821044921,41.9514312744141 -75.2916107177733,41.9503707885744 -75.289207458496,41.9482421875001 -75.2855072021483,41.9450607299806 -75.2813873291015,41.9415702819827 -75.2787475585936,41.9391403198243 -75.2776336669922,41.9370803833009 -75.2766876220703,41.9342193603517 -75.2749633789062,41.9305496215821 -75.2750167846679,41.928279876709 -75.2745285034179,41.9246406555176 -75.2734222412109,41.920539855957 -75.2716598510742,41.917781829834 -75.2695770263671,41.9150619506837 -75.2677307128906,41.9123306274414 -75.2671966552733,41.9099311828613 -75.2670593261719,41.9072494506837 -75.2671432495117,41.9046096801758 -75.2677612304687,41.9027900695803 -75.2689971923828,41.9000701904298 -75.2708587646484,41.8982620239258 -75.272102355957,41.8964500427246 -75.2721099853516,41.8937187194824 -75.2706527709961,41.8914184570313 -75.2676696777343,41.8894805908203 -75.2671585083008,41.8892288208007 -75.2639770507812,41.8876686096191 -75.2622680664062,41.886890411377 -75.2609863281249,41.8848915100099 -75.2598571777343,41.881690979004 -75.2592773437499,41.8798713684083 -75.2587890624999,41.8782005310059 -75.2591857910155,41.8761901855469 -75.260513305664,41.8746719360352 -75.2617568969726,41.8733291625977 -75.2625198364257,41.8713111877444 -75.2622528076172,41.8687705993652 -75.2613525390624,41.8673210144044 -75.259147644043,41.8653297424316 -75.2574157714844,41.8646392822266 -75.2536239624023,41.8647804260254 -75.2505264282227,41.8651809692386 -75.2469329833984,41.8659706115725 -75.2445907592773,41.8662109375 -75.2426071166992,41.8664207458499 -75.2376861572266,41.8664093017578 -75.2357330322264,41.8653793334962 -75.2338638305664,41.8644905090333 -75.2334060668945,41.8641014099122 -75.2326965332031,41.8634986877444 -75.2309188842773,41.8623085021973 -75.2278366088867,41.860939025879 -75.2253799438477,41.8604888916016 -75.2229232788085,41.8613891601562 -75.2210159301757,41.86238861084 -75.2178878784179,41.8641510009768 -75.2154922485351,41.8668212890627 -75.2121887207031,41.8685989379884 -75.2116775512695,41.8687400817871 -75.2093276977539,41.8690795898438 -75.2066116333007,41.869400024414 -75.2060089111328,41.8694801330568 -75.2031631469727,41.8695106506348 -75.1974029541016,41.8683319091797 -75.193717956543,41.866970062256 -75.1913299560547,41.8655014038088 -75.1895294189453,41.8641014099122 -75.1876983642578,41.8636207580566 -75.1859283447265,41.8631210327148 -75.1833267211914,41.8638801574709 -75.1811370849609,41.865909576416 -75.1797409057617,41.8680992126466 -75.1787033081054,41.8697204589845 -75.1763229370116,41.8710594177246 -75.1741790771484,41.8717193603516 -75.1717071533203,41.871711730957 -75.1698989868163,41.87073135376 -75.1682815551757,41.8688201904296 -75.1678771972656,41.8659896850586 -75.1674270629882,41.8639793395996 -75.1674880981445,41.8617019653321 -75.1663131713867,41.857780456543 -75.1641082763671,41.8547821044922 -75.16153717041,41.8526992797852 -75.1584930419922,41.8517799377441 -75.1551666259766,41.8512992858887 -75.1511230468749,41.851718902588 -75.1502761840819,41.8518218994142 -75.1477661132812,41.8521194458008 -75.1436614990234,41.8528289794922 -75.1431121826171,41.8526802062989 -75.1409912109374,41.8521003723146 -75.1397628784179,41.8516502380372 -75.1381988525391,41.8508796691895 -75.1354293823242,41.8489799499512 -75.1321105957031,41.8476791381836 -75.1293106079102,41.8470802307131 -75.1259994506836,41.8465995788574 -75.1219177246093,41.8461494445801 -75.1182327270507,41.8452301025391 -75.1157684326172,41.844310760498 -75.1145401000977,41.8429489135742 -75.1144714355469,41.8411598205567 -75.1139068603515,41.8395614624026 -75.1140365600585,41.8359298706057 -75.1139907836914,41.8323020935058 -75.1142272949218,41.8297996520999 -75.1133270263672,41.8275489807129 -75.1118927001953,41.8254890441895 -75.1101303100585,41.8240509033205 -75.1087570190429,41.8229904174806 -75.1078567504883,41.8225402832031 -75.1059036254882,41.8217010498048 -75.1034774780273,41.8202896118166 -75.1004333496094,41.8193321228027 -75.0986175537109,41.8183784484863 -75.0962066650389,41.8165206909181 -75.094367980957,41.8160896301269 -75.0912933349609,41.8152198791504 -75.0907135009766,41.8151817321779 -75.0882568359374,41.8150100708009 -75.0857772827148,41.8154220581054 -75.0833206176757,41.8153686523439 -75.0808563232421,41.8153305053713 -75.077796936035,41.8148193359376 -75.0741424560546,41.813388824463 -75.0729370117186,41.8124504089357 -75.0724029541016,41.810619354248 -75.0722427368163,41.8087615966797 -75.0727081298828,41.8067588806152 -75.0731658935547,41.8056411743165 -75.0741195678711,41.8033218383791 -75.0752029418945,41.8006896972657 -75.0772171020507,41.7992401123047 -75.079116821289,41.7978591918946 -75.0796966552734,41.7974319458009 -75.0821533203124,41.7972412109376 -75.0827102661133,41.7971992492675 -75.0852432250975,41.7972412109376 -75.0857772827148,41.7971687316896 -75.0882720947265,41.7968406677246 -75.0914077758788,41.796112060547 -75.0932464599608,41.7952117919922 -75.0951080322266,41.7938499450684 -75.0969696044921,41.7920417785646 -75.0988311767578,41.7893218994141 -75.099639892578,41.7878494262696 -75.1000671386719,41.7870597839357 -75.101676940918,41.7830200195312 -75.1019668579102,41.7798004150392 -75.1013565063475,41.777069091797 -75.100227355957,41.7745094299316 -75.0971221923828,41.7720298767089 -75.0940093994139,41.7711486816409 -75.0897598266602,41.7714385986329 -75.0842132568359,41.7717895507814 -75.0792694091797,41.7721519470215 -75.0749664306641,41.7716102600099 -75.0700759887694,41.7706108093264 -75.0646286010742,41.7682418823243 -75.0614166259766,41.766040802002 -75.0586929321288,41.762218475342 -75.0560684204102,41.7582702636719 -75.0546874999999,41.7530708312989 -75.0537033081055,41.7478294372559 -75.0538482666015,41.7426109313966 -75.0539474487304,41.7389717102052 -75.0542373657226,41.735149383545 -75.0542526245116,41.730350494385 -75.0530624389648,41.7260589599612 -75.0519332885742,41.7226295471191 -75.0506362915039,41.7196998596192 -75.0500488281249,41.7165222167971 -75.0498580932616,41.7152786254882 -75.0511474609375,41.7134895324707 -75.0536270141602,41.7126312255859 -75.0567169189453,41.7122306823733 -75.0580978393555,41.7124595642091 -75.0592727661132,41.7126502990724 -75.0597610473632,41.7125816345215 -75.063606262207,41.7120208740237 -75.0659408569335,41.7116889953614 -75.0665969848633,41.7115097045898 -75.0679168701172,41.7093200683595 -75.0673294067383,41.7065887451172 -75.0648880004882,41.7038612365723 -75.0618286132812,41.7011184692384 -75.0590820312499,41.6977386474609 -75.0564880371094,41.6940803527832 -75.0561981201172,41.6935806274414 -75.0533981323242,41.6871910095215 -75.053337097168,41.6829299926758 -75.0535507202148,41.6808395385743 -75.0542068481445,41.6785812377932 -75.0561370849609,41.676342010498 -75.057746887207,41.6748390197754 -75.0587463378906,41.6729698181153 -75.0587997436523,41.6712989807132 -75.0571670532226,41.669719696045 -75.0553665161132,41.6674308776856 -75.0547790527343,41.6669197082521 -75.052848815918,41.6634101867678 -75.0517578124999,41.6608200073243 -75.0510711669921,41.6572189331057 -75.0504531860352,41.6529617309572 -75.050308227539,41.6494407653809 -75.0493621826171,41.6412506103517 -75.0487365722656,41.6344490051271 -75.0473098754883,41.6298599243164 -75.0462036132812,41.6262016296387 -75.0450973510741,41.6225509643556 -75.044563293457,41.620719909668 -75.0446166992186,41.6189002990723 -75.0465240478514,41.6171302795413 -75.0496063232422,41.6167297363281 -75.0520629882812,41.6167793273926 -75.0537490844726,41.6175689697267 -75.0568237304686,41.618480682373 -75.0588073730468,41.6169090270997 -75.0604858398438,41.6155700683594 -75.0603561401366,41.6133995056152 -75.0618133544922,41.611270904541 -75.0630111694335,41.6103286743165 -75.0652389526367,41.6099319458008 -75.068260192871,41.6103515625001 -75.0703659057616,41.6103591918948 -75.0728378295897,41.6090087890626 -75.0734558105469,41.6081008911133 -75.0728607177734,41.6053695678712 -75.0710372924804,41.603099822998 -75.0699462890624,41.6019592285157 -75.0679931640625,41.599910736084 -75.0644531249999,41.5961189270021 -75.0612716674804,41.5935287475587 -75.0582122802734,41.5921592712402 -75.0550079345702,41.5905685424805 -75.0524597167969,41.5877189636232 -75.0503692626953,41.5856819152831 -75.0472259521484,41.5821304321292 -75.0461273193359,41.5805091857913 -75.0429687499999,41.5748596191407 -75.0408172607422,41.5710296630861 -75.0388565063476,41.5699310302736 -75.0359497070312,41.5670890808108 -75.0326385498047,41.5656814575196 -75.0293807983398,41.5636405944825 -75.0246658325195,41.5598106384278 -75.0216369628905,41.5562515258789 -75.0191879272461,41.552978515625 -75.0175704956055,41.5498199462893 -75.0167770385742,41.5470695495608 -75.0174026489257,41.5447998046875 -75.0189361572265,41.543312072754 -75.0198287963867,41.5429191589357 -75.0215377807616,41.5417213439944 -75.0229568481445,41.5402908325198 -75.0227890014648,41.5377197265625 -75.0217590332031,41.5352897644044 -75.0199890136718,41.5335197448733 -75.017578125,41.5321121215821 -75.0133361816405,41.5306701660156 -75.0080032348633,41.5277519226074 -75.0055770874023,41.525489807129 -75.0035095214843,41.5229301452636 -75.0022430419921,41.5202293395997 -75.001609802246,41.518180847168 -75.0016632080078,41.5156898498535 -75.0022506713867,41.5145606994629 -75.0029067993163,41.5125198364259 -75.0042266845703,41.5105094909671 -75.0030364990233,41.5091514587403 -75.0025024414062,41.5086212158205 -74.999412536621,41.5081520080569 -74.9963302612304,41.508541107178 -74.991958618164,41.0772590637208 -74.9956970214843,41.076099395752 -74.9993362426758,41.0747184753418 -75.0023803710938,41.0728988647461 -75.0046005249023,41.0712203979494 -75.0061264038086,41.069839477539 -75.0039901733397,40.4113121032716 -75.0009689331055,40.4117393493652 -74.9982070922852,40.4120216369629 -74.9973373413086,40.4120216369629 -74.9956665039062,40.0347900390626 -74.996696472168,40.0338020324708 -75.0004806518555,40.031120300293 -75.0047912597656,40.0286598205568 -75.7875213623046,39.7230796813965 -76.0148086547852,39.7228012084962 -76.13916015625,39.7222785949708 -76.2241516113281,39.7219314575195 -76.8401412963867,39.7205390930176 -76.9962158203124,39.7196922302247 -76.9998092651367,39.7196807861328 -77.1211929321289,39.7194290161132 -77.2151565551757,39.7196121215821 -77.3926773071289,39.7199516296387 -77.4596481323242,39.7204093933106 -77.4674224853514,39.7204818725588 -77.6719360351562,39.7214889526368 -77.9380493164062,39.7240104675295 -78.1007080078125,39.7235412597659 -78.2101516723632,39.7232208251954-78.9146423339844,39.7231597900393 -79.0408172607422,39.7225494384766 -79.3213195800781,39.7221603393555 -79.3889007568359,39.7220687866212 -79.3900909423828,39.721950531006 -79.3912963867188,39.7220306396485 -79.9146881103516,39.7221107482912 -80.1911468505859,39.7216796875001 -80.4243698120117,39.7213516235352 -80.5170516967773,39.7212219238282 -80.5178604125977,39.7543106079103 -80.5192489624023,39.9298896789554 -80.5189361572266,40.1081695556641 -80.5188827514648,40.1618995666504 -80.5187301635742,40.2882804870608 -80.5189819335937,40.4013214111328 -80.2618408203124,42.0687103271484 -80.2473526000976,42.0776519775392 -80.2314605712889,42.0825309753419 -80.2185974121094,42.0859794616699 -80.1485519409179,42.130599975586 -80.1496505737305,42.1269416809083 -80.1514205932617,42.1246299743653 -80.1537933349609,42.1218605041504 -80.011848449707,42.1669502258303 -80.0039520263672,42.1711921691896 -79.7869415283203,42.2569999694825 -79.7752685546875,42.2603797912598 -79.7673492431641,42.2646102905273 -79.7624969482421,42.2678794860841</coordinates></LinearRing></innerBoundaryIs></Polygon></MultiGeometry></Placemark></Document></kml>';

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map_canvas"></div>

这篇关于Google地图仅显示PA状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Restrict