2016-02-04 64 views
-2

我正在尋找一個工具來繪製地圖上的多邊形從谷歌地圖API(我發現了一些),但我想要一個讓你得到所有的座標多邊形的點。因爲目前我只能得到多邊形的點座標或在Json中檢查
你知道類似的東西嗎?你知道一個在地圖上繪製的工具嗎

回答

0

更多的研究後,我發現,這爲我工作: http://codepen.io/jhawes/full/ujdgK/
這裏是解決方案的代碼:

//var myPolygon; 
function initialize() { 
    // Map Center 
    var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654); 
    // General Options 
    var mapOptions = { 
    zoom: 12, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.RoadMap 
    }; 
    var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 
    // Polygon Coordinates 
    var triangleCoords = [ 
    new google.maps.LatLng(33.5362475, -111.9267386), 
    new google.maps.LatLng(33.5104882, -111.9627875), 
    new google.maps.LatLng(33.5004686, -111.9027061) 
    ]; 
    // Styling & Controls 
    myPolygon = new google.maps.Polygon({ 
    paths: triangleCoords, 
    draggable: true, // turn off if it gets annoying 
    editable: true, 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#FF0000', 
    fillOpacity: 0.35 
    }); 

    myPolygon.setMap(map); 
    //google.maps.event.addListener(myPolygon, "dragend", getPolygonCoords); 
    google.maps.event.addListener(myPolygon.getPath(), "insert_at", getPolygonCoords); 
    //google.maps.event.addListener(myPolygon.getPath(), "remove_at", getPolygonCoords); 
    google.maps.event.addListener(myPolygon.getPath(), "set_at", getPolygonCoords); 
} 

//Display Coordinates below map 
function getPolygonCoords() { 
    var len = myPolygon.getPath().getLength(); 
    var htmlStr = ""; 
    for (var i = 0; i < len; i++) { 
    htmlStr += "new google.maps.LatLng(" + myPolygon.getPath().getAt(i).toUrlValue(5) + "), "; 
    //Use this one instead if you want to get rid of the wrap > new google.maps.LatLng(), 
    //htmlStr += "" + myPolygon.getPath().getAt(i).toUrlValue(5); 
    } 
    document.getElementById('info').innerHTML = htmlStr; 
} 
function copyToClipboard(text) { 
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text); 
} 


<body onload="initialize()"> 
    <h3>Drag or re-shape for coordinates to display below (<a href="https://github.com/jeremy-hawes/google-maps-coordinates-polygon-tool">Github</a>)</h3> 
    <h3><a href="http://codepen.io/jhawes/blog/creating-a-real-estate-polygon-tool">See blog post</a></h3> 
    <div id="map-canvas"></div> 
    <div class="lngLat"><span class="one">Lat</span><span class="two">,Lng</span></div> 
</body> 
<button id="clipboard-btn" onclick="copyToClipboard(document.getElementById('info').innerHTML)">Copy to Clipboard</button> 
<textarea id="info"></textarea> 
相關問題