我正在尝试将圆导出为 kml 格式并放入文本区域中进行下载。可以用 google map api 来实现吗？我是否需要登录 Google 并在其中创建 map ，或者我可以使用 JavaScript 来完成此操作。
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 700px;
width: 1400px;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(42.364294, -71.061730)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="name" value="test.kml">
<textarea name="text" value= ""></textarea>
<input type="submit" value="Download">
</form>
<form onsubmit="plotPoint(this['latitude'].value, this['longitude'].value, this['radius'].value); return false">
Latitude: <input type="text" name ="latitude">
Longitude:<input type="text" name ="longitude">
Radius: <input type="text" name ="radius">
<input type="submit" value="Plot Point">
</form>
<script>
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
function plotPoint(latitude, longitude, radius){
var myLatlng = new google.maps.LatLng(latitude, longitude );
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
console.log(radius);
var circleOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: myLatlng,
radius: parseFloat(radius)
};
// Add the circle for this city to the map.
circle = new google.maps.Circle(circleOptions);
}
</script>
</body>
</html>
最佳答案
KML 中没有“圈子”。您需要生成具有正确半径的圆形多边形。我在此页面上实现了一个版本:
如果您单击“生成 KML”，您将获得此 KML:
<?xml version="1.0" encoding="UTF-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Placemark>
<name><![CDATA[]]></name>
<description><![CDATA[]]></description>
<Polygon>
<extrude>1</extrude>
<altitudeMode>relativeToGround</altitudeMode>
<outerBoundaryIs>
<LinearRing>
<coordinates>
75.97323066160926,20.34462694382967,0
75.96496457627045,20.5023906507352,0
75.94024592717449,20.658635006900816,0
75.89931276842476,20.81185529376479,0
75.8425593087164,20.96057591620589,0
75.77053211489097,21.10336461333105,0
75.68392484819908,21.23884625193071,0
75.58357158396333,21.36571606976336,0
75.47043877897697,21.48275224112917,0
75.34561596399672,21.588827643719412,0
75.21030525096592,21.68292071342043,0
75.06580975601942,21.764125282534497,0
74.91352104976282,21.83165930667011,0
74.75490575568685,21.884872396256995,0
74.59149142578141,21.92325208015319,0
74.42485182937483,21.94642874102231,0
74.256591796875,21.954179174950532,0
74.08833176437517,21.94642874102231,0
73.92169216796859,21.92325208015319,0
73.75827783806315,21.884872396256995,0
73.59966254398718,21.83165930667011,0
73.44737383773058,21.764125282534497,0
73.30287834278408,21.68292071342043,0
73.16756762975328,21.588827643719412,0
73.04274481477303,21.48275224112917,0
72.92961200978667,21.36571606976336,0
72.82925874555092,21.23884625193071,0
72.74265147885903,21.10336461333105,0
72.6706242850336,20.96057591620589,0
72.61387082532524,20.81185529376479,0
72.57293766657551,20.658635006900816,0
72.54821901747955,20.5023906507352,0
72.53995293214074,20.34462694382967,0
72.54821901747955,20.18686323692414,0
72.57293766657551,20.030618880758524,0
72.61387082532524,19.87739859389455,0
72.6706242850336,19.72867797145345,0
72.74265147885903,19.58588927432829,0
72.82925874555092,19.45040763572863,0
72.92961200978667,19.323537817895982,0
73.04274481477302,19.20650164653017,0
73.16756762975328,19.10042624393993,0
73.30287834278408,19.00633317423891,0
73.44737383773058,18.925128605124844,0
73.59966254398718,18.85759458098923,0
73.75827783806315,18.804381491402346,0
73.92169216796859,18.76600180750615,0
74.08833176437517,18.74282514663703,0
74.256591796875,18.73507471270881,0
74.42485182937483,18.74282514663703,0
74.59149142578141,18.76600180750615,0
74.75490575568685,18.804381491402346,0
74.91352104976282,18.85759458098923,0
75.06580975601942,18.925128605124844,0
75.21030525096592,19.00633317423891,0
75.34561596399672,19.10042624393993,0
75.47043877897697,19.20650164653017,0
75.58357158396333,19.323537817895982,0
75.68392484819908,19.45040763572863,0
75.77053211489097,19.58588927432829,0
75.8425593087164,19.72867797145345,0
75.89931276842476,19.87739859389455,0
75.94024592717449,20.030618880758524,0
75.96496457627045,20.18686323692414,0
75.97323066160926,20.34462694382967,0
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Document>
</kml>
That KML displayed on a Google Maps Javascript API v3 map
生成圆的代码是:
if (result.overlays[i].type == "circle"){
//its a polygon, approximate a circle by a circular 64 sided polygon.
xw.writeStartElement('outerBoundaryIs');
xw.writeStartElement('LinearRing');
xw.writeStartElement( "coordinates" );
var d2r = Math.PI / 180; // degrees to radians
var r2d = 180 / Math.PI; // radians to degrees
var earthsradius = 6378137; // 6378137 is the radius of the earth in meters
var dir = 1; // clockwise
var points = 64;
// find the raidus in lat/lon
var rlat = (result.overlays[i].radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(result.overlays[i].center.lat * d2r);
var extp = new Array();
if (dir==1) {
var start=0;
var end=points+1
} // one extra here makes sure we connect the line
else {
var start=points+1;
var end=0
}
for (var j=start; (dir==1 ? j < end : j > end); j=j+dir) {
var theta = Math.PI * (j / (points/2));
ey = result.overlays[i].center.lng + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
ex = result.overlays[i].center.lat + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
xw.writeString( ey + "," + ex + ",0" );
}
xw.writeEndElement();
xw.writeEndElement();
xw.writeEndElement();
关于javascript - 将谷歌地图API圈导出到kml，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30690279/