我在json文件中有一个我国家地图的坐标。现在我想使用javascript在浏览器中绘制该地图。怎么样？

时间：2018-01-31 12:10:06

标签： javascript json google-maps leaflet geojson

这是坐标。 

var countries = {
"type":"FeatureCollection","features":[
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[86.9040946658046,26.488352314555325],[86.90633964409925,26.490407360768437],[86.90700404477711,26.491035129744972],[86.90659643750917,26.492702539622876],[86.90965929755751,26.495337986570217],[86.9098771330603,26.49587294354449],[86.90990536490756,26.496561258887436],[86.91078442087975,26.497396763374187],[86.91089938749029,26.498274688628193],[86.91071227823545,26.498678587648378],[86.91101585062712,26.499308287805018],[86.91146135628215,26.49926567412408],[86.91256789569097,26.499487486110635],[86.91401532565405,26.49984047994986],[86.91635779581918,26.501678734284745],[86.91634190804363,26.50238279749692],[86.91734725609103,26.503410162379154],[86.91785966612979,26.504527510990744],[86.91607785620165,26.509432427001784],[86.91597291727344,26.510145487901177],[86.91861445394541,26.515881094252997],[86.92114026074903,26.518407729057397],[86.92361515280707,26.523129983609856],[86.93328955224632,26.53361916960892],[86.93864302378341,26.534659607676975],[86.94566000430191,26.53690103175807],[86.95090487853898,26.537297836795343],[86.95684237047212,26.54265928230654],[86.96178089849295,26.543572349548],[86.96628331089354,26.546712464700878],[86.96875120024163,26.551587393385695],[86.97212914458258,26.554196723192586],[86.9738775228848,26.558092037668008],[86.98111236229725,26.562701196317335],[86.98906742725158,26.569950324107733],[86.99242600257601,26.572389918489353],[86.99172488618618,26.57626450522596],[86.98343329630863,26.584026559223112],[86.98223431411661,26.58756485424169],[86.98250615568685,26.590421734081765],[86.98441779825758,26.595578315953578],[86.98887031097104,26.603102296903764],[86.9891024380073,26.60746891896761],[86.98688010572101,26.613132760349373],[86.9796891320715,26.62341529969789],[86.97883989097502,26.625236250778478],[86.9854558904282,26.628992098384558],[86.98546590688733,26.63402884533776],[86.98852690841771,26.63585698801509],[86.98852292293546,26.641067469488217],[86.99108931910108,26.64498285850007],[86.99111409256747,26.64959539274751],[86.99490906682587,26.65409518924426],[87.00228981167379,26.656331558121366],[87.00262144150574,26.65994662242554],[87.0044546046917,26.66165700430478],[87.00702296942868,26.667023266352924],[87.01284383605835,26.670100784819212],[87.01330097742888,26.675333772119497],[87.01212152757466,26.677222648919802],[87.01072796071125,26.68296124747855],[87.01168351166152,26.68647245654134],[87.01429992374158,26.689322252166242],[87.01397486751547,26.696843525467568],[87.01301434625738,26.70074073010426],[87.00777934839533,26.709020477086604],[87.0031750125352,26.70882885189791],[87.00053107121421,26.707517858602653],[86.99488240482783,26.70281729787391],[86.99132661234577,26.703002157860606],[86.99089201406237,26.698543103423006],[86.98811071712713,26.700081920693947],[86.98452842082068,26.7035318692542],[86.98365723735469,26.705709288502483],[86.98386114502829,26.71171414098192],[86.9827789658272,26.714972524361386],[86.98219589904558,26.715789317747113],[86.9814824751022,26.716563237640262],[81.24186106821094,30.01261858312269],[81.24540448021261,30.011211388331777],[81.25365663353152,30.01969656923093],[81.25326818044644,30.023637628348293],[81.24825518771529,30.02692887514526],[81.23744721905952,30.03156804245059],[81.2427063328248,30.033701097618376],[81.25002074003662,30.03860885475444],[81.26077674130778,30.0396480241027],[81.26301073321453,30.04039467054986],[81.26399067146995,30.043349591164276],[81.27196891464939,30.045266265636123]]]},"properties":
{"Province":7,"TARGET":"Province7","Level":0,"DISTRICT":"प्रदेश नं. ७"}}
]};

1 个答案:

答案 0 :(得分：1)

您的“代码”（国家/地区变量）是GeoJSON。这是Google Maps Javascript API v3 DataLayer支持的。

但是当我这样做时，我收到一条错误消息：

"in property "features": at index 0: in property "geometry": in property "coordinates": at index 0: first and last positions are not equal"

因为它无效。

将多边形路径的第一个和最后一个坐标设置为相同的值使其有效。

proof of concept fiddle（但看起来你错过了很多分数）

enter image description here

代码段 

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(26.490, 86.906),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  map.data.addListener('addfeature', function(evt) {
    var bounds = new google.maps.LatLngBounds();
    console.log(evt.feature.getGeometry().getType());
    var coords = evt.feature.getGeometry().getAt(0).getArray();
    for (var i = 0; i < coords.length; i++) {
      bounds.extend(coords[i]);
    }
    map.fitBounds(bounds);
  });
  map.data.addGeoJson(countries);


}
google.maps.event.addDomListener(window, "load", initialize);
var countries = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [86.9040946658046, 26.488352314555325],
          [86.90633964409925, 26.490407360768437],
          [86.90700404477711, 26.491035129744972],
          [86.90659643750917, 26.492702539622876],
          [86.90965929755751, 26.495337986570217],
          [86.9098771330603, 26.49587294354449],
          [86.90990536490756, 26.496561258887436],
          [86.91078442087975, 26.497396763374187],
          [86.91089938749029, 26.498274688628193],
          [86.91071227823545, 26.498678587648378],
          [86.91101585062712, 26.499308287805018],
          [86.91146135628215, 26.49926567412408],
          [86.91256789569097, 26.499487486110635],
          [86.91401532565405, 26.49984047994986],
          [86.91635779581918, 26.501678734284745],
          [86.91634190804363, 26.50238279749692],
          [86.91734725609103, 26.503410162379154],
          [86.91785966612979, 26.504527510990744],
          [86.91607785620165, 26.509432427001784],
          [86.91597291727344, 26.510145487901177],
          [86.91861445394541, 26.515881094252997],
          [86.92114026074903, 26.518407729057397],
          [86.92361515280707, 26.523129983609856],
          [86.93328955224632, 26.53361916960892],
          [86.93864302378341, 26.534659607676975],
          [86.94566000430191, 26.53690103175807],
          [86.95090487853898, 26.537297836795343],
          [86.95684237047212, 26.54265928230654],
          [86.96178089849295, 26.543572349548],
          [86.96628331089354, 26.546712464700878],
          [86.96875120024163, 26.551587393385695],
          [86.97212914458258, 26.554196723192586],
          [86.9738775228848, 26.558092037668008],
          [86.98111236229725, 26.562701196317335],
          [86.98906742725158, 26.569950324107733],
          [86.99242600257601, 26.572389918489353],
          [86.99172488618618, 26.57626450522596],
          [86.98343329630863, 26.584026559223112],
          [86.98223431411661, 26.58756485424169],
          [86.98250615568685, 26.590421734081765],
          [86.98441779825758, 26.595578315953578],
          [86.98887031097104, 26.603102296903764],
          [86.9891024380073, 26.60746891896761],
          [86.98688010572101, 26.613132760349373],
          [86.9796891320715, 26.62341529969789],
          [86.97883989097502, 26.625236250778478],
          [86.9854558904282, 26.628992098384558],
          [86.98546590688733, 26.63402884533776],
          [86.98852690841771, 26.63585698801509],
          [86.98852292293546, 26.641067469488217],
          [86.99108931910108, 26.64498285850007],
          [86.99111409256747, 26.64959539274751],
          [86.99490906682587, 26.65409518924426],
          [87.00228981167379, 26.656331558121366],
          [87.00262144150574, 26.65994662242554],
          [87.0044546046917, 26.66165700430478],
          [87.00702296942868, 26.667023266352924],
          [87.01284383605835, 26.670100784819212],
          [87.01330097742888, 26.675333772119497],
          [87.01212152757466, 26.677222648919802],
          [87.01072796071125, 26.68296124747855],
          [87.01168351166152, 26.68647245654134],
          [87.01429992374158, 26.689322252166242],
          [87.01397486751547, 26.696843525467568],
          [87.01301434625738, 26.70074073010426],
          [87.00777934839533, 26.709020477086604],
          [87.0031750125352, 26.70882885189791],
          [87.00053107121421, 26.707517858602653],
          [86.99488240482783, 26.70281729787391],
          [86.99132661234577, 26.703002157860606],
          [86.99089201406237, 26.698543103423006],
          [86.98811071712713, 26.700081920693947],
          [86.98452842082068, 26.7035318692542],
          [86.98365723735469, 26.705709288502483],
          [86.98386114502829, 26.71171414098192],
          [86.9827789658272, 26.714972524361386],
          [86.98219589904558, 26.715789317747113],
          [86.9814824751022, 26.716563237640262],
          [81.24186106821094, 30.01261858312269],
          [81.24540448021261, 30.011211388331777],
          [81.25365663353152, 30.01969656923093],
          [81.25326818044644, 30.023637628348293],
          [81.24825518771529, 30.02692887514526],
          [81.23744721905952, 30.03156804245059],
          [81.2427063328248, 30.033701097618376],
          [81.25002074003662, 30.03860885475444],
          [81.26077674130778, 30.0396480241027],
          [81.26301073321453, 30.04039467054986],
          [81.26399067146995, 30.043349591164276],
          [81.27196891464939, 30.045266265636123],
          [86.9040946658046, 26.488352314555325]
        ]
      ]
    },
    "properties": {
      "Province": 7,
      "TARGET": "Province7",
      "Level": 0,
      "DISTRICT": "प्रदेश नं. ७"
    }
  }]
};
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

相关问题
最新问题