2017-05-31 105 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>