Map/polygon 从 KML/JSON/VARIOUS mapit 源到 Lat/Long 多边形的转换?

Map/polygon conversion from KML/JSON/VARIOUS mapit source to Lat/Long polygon?

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

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

此后端使用的格式类似于

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

我的问题是它们似乎不兼容,我无法Google 搜索可以为我执行此操作的工具? (没有转换器,但没有涵盖手头的任务)

抱歉,如果这是一个 'dumb' 问题,即使在我的后端找出映射语法的名称也会有很大帮助

这些是(部分)坐标列表,表示多边形区域内的点。

我的问题是它们似乎不兼容,我无法Google搜索可以为我执行此操作的工具?

只需输入它们即可获得简单的解决方案。根据技术用途,将 javascript 作为一个数组传递给 javascript 并读取它们并将它们绘制在地图上。

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

根据您提供的坐标,您可以使用 Google-maps-api 实现以下目标:

Link 到 JSFiddle:https://jsfiddle.net/y6f9fre6/

// 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);
}
/* 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;
}
<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>