-2
我正在尋找一個工具來繪製地圖上的多邊形從谷歌地圖API(我發現了一些),但我想要一個讓你得到所有的座標多邊形的點。因爲目前我只能得到多邊形的點座標或在Json中檢查
你知道類似的東西嗎?你知道一個在地圖上繪製的工具嗎
我正在尋找一個工具來繪製地圖上的多邊形從谷歌地圖API(我發現了一些),但我想要一個讓你得到所有的座標多邊形的點。因爲目前我只能得到多邊形的點座標或在Json中檢查
你知道類似的東西嗎?你知道一個在地圖上繪製的工具嗎
更多的研究後,我發現,這爲我工作: 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>