Map/Polygon-Konvertierung von KML/JSON/VARIOUS Mapit-Quelle zu Lat/Long Polygon?

Question

Ich möchte die Kartenzone, die ich in meinem benutzerdefinierten Back-End bei der Arbeit habe, ändern.

Die aktuellen Eingaben führen zu einer Karte, die nicht korrekt ist.

Das Format dieses Backend verwendet sieht aus wie

51,258548 -0,187498

51,302355 -0,30708

51,30872 -0,393738

51,328764 -0,469456

51,401552 -0,527588

51.50003 6 -0.489758

51,563533 -0,530822

etc etc

Aber ich brauche die Karte Datei auf https://mapit.mysociety.org/area/2247.html statt gehostet haben.

Mein Problem ist, dass sie scheinbar inkompatibel sind und ich Google nicht in der Lage war, ein Tool zu suchen, das dies für mich tut? (Es ist nicht von Konvertern, aber nichts, was die Aufgabe in der Hand bedeckt)

Entschuldigt, wenn es sich um eine ‚dumme‘ Frage ist, sogar den Namen der Zuordnungs Syntax in meinem Backend herauszufinden, würde

Answer 1

Thesen sind ein enorm helfen (Teil-) Liste von Koordinaten, die Punkte mit einem Polygonbereich darstellen.

Mein Problem ist, dass sie scheinbar inkompatibel sind und ich Google nicht in der Lage war, ein Tool zu suchen, das dies für mich tut?

Geben Sie sie einfach für eine einfache Lösung ein. Je nach Technologieverwendung übergeben Sie das Javascript als ein Array und lesen Sie diese auf der Karte.

Aber ich muss stattdessen die Map-Datei bei https://mapit.mysociety.org/area/2247.html gehostet haben.

Mit den Koordinaten gab man Sie folgende mit Google-Maps-api erreichen können:

Link zu 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>