2017-05-31 108 views
-1

我想改变我在自定义后端工作时的地图区域。从KML/JSON/VARIOUS mapit源到Lat/Long多边形的地图/多边形转换?

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

格式这个后端使用的模样

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

等等等等

但是我需要有在https://mapit.mysociety.org/area/2247.html,而不是主办的地图文件。

我的问题是他们似乎不兼容,我还没有能够谷歌搜索一个工具,将为我做这个? (有不转换,但没有涵盖手头的任务)

道歉,如果这是一个“愚蠢”的问题,甚至查不到我在后台的映射语法的名字,将有助于大大

回答

0

论文是(部分)表示具有多边形区域的点的坐标列表。

我的问题是他们似乎不兼容,我还没有能够谷歌搜索一个工具,将为我做这个?

只需键入他们的简单解决方案。根据技术使用将数组传递给JavaScript并读取它们在地图上绘制它们。

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

有了坐标,你给你可以实现与谷歌,地图的API如下: enter image description here

链接的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>