从KML / JSON / VARIOUS mapit源到Lat / Long多边形的地图/多边形转换？

Question

我想在我的自定义后端工作时更改我的地图区域。

当前输入会导致地图不正确。

此后端使用的格式类似于

51.258548 -0.187498

51.302355 -0.30708

51.30872 -0.393738

51.328764 -0.469456

51.401552 -0.527588

51.500036 -0.489758

51.563533 -0.530822

等等

但我需要在https://mapit.mysociety.org/area/2247.html托管地图文件。

我的问题是它们似乎不兼容，而且我无法通过谷歌搜索为我这样做的工具？ （那里没有转换器，但没有任何东西可以解决手头的任务）

道歉，如果它是一个愚蠢的＆＃39;问题，即使在我的后端找到映射语法的名称也会有很大的帮助

Answer 1

这些是（部分）坐标列表，表示带有多边形区域的点。

我的问题是它们似乎不兼容，而且我无法通过Google搜索能够为我执行此操作的工具？

只需键入它们即可获得简单的解决方案。根据技术用途，将javascript作为数组传递给他们，然后阅读它们在地图上绘制它们。

但我需要在https://mapit.mysociety.org/area/2247.html托管地图文件。

通过您给出的坐标，您可以使用Google-maps-api实现以下目标：

链接到JSFiddle：https://jsfiddle.net/y6f9fre6/

＆＃13;

＆＃13;

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {
      lat: 51.401552,
      lng:  -0.527588
    },
    mapTypeId: 'roadmap'
  });

  //your co-ordinates go here
  var triangleCoords = [{
      lat: 51.258548,
      lng: -0.187498
    }, {
      lat: 51.302355,
      lng: -0.30708
    }, {
      lat: 51.30872,
      lng: -0.393738
    },

    {
      lat: 51.328764,
      lng: -0.469456
    },

    {
      lat: 51.401552,
      lng: -0.527588
    },

    {
      lat: 51.500036,
      lng: -0.489758
    },

    {
      lat: 51.563533,
      lng: -0.530822
    },
  ];

  // Construct the polygon.
  var coordinates = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  coordinates.setMap(map);
}

＆＃13;

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

＆＃13;

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">


</script>

＆＃13;

＆＃13;

＆＃13;