javascript - 将谷歌地图API圈导出到kml-6ren

javascript - 将谷歌地图API圈导出到kml

转载作者：行者123 更新时间：2023-11-28 00:13:12

我正在尝试将圆导出为 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 中没有“圈子”。您需要生成具有正确半径的圆形多边形。我在此页面上实现了一个版本:

example

如果您单击“生成 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/

文章推荐： javascript - jquery - .hide() .show() 破坏了 CSS 样式

文章推荐： javascript - 减少 Three.js 中的距离模糊

文章推荐： javascript - 如何引用被 knockout 组件更改的元素？

powershell - Powershell-导出-CSV外循环，仅最后一行被打印/导出
是否可以调整此代码以导出foreach循环外的所有行: 这工作正常(内部循环): $vms = Get-VM | Where { $_.State –eq ‘Running’ } | Select-
webpack - 导出 webpack 包/前置模块。导出？避免节点中的空对象？
我试图将我的 bundle.js 引入我的 Node 服务器，但显然 webpack 包在顶部的所有包代码之前缺少一个 module.exports =。我可以手动将 module.exports
Android库项目——导出
我有一个 android 项目，其中包含一个库项目。在这个库项目中，我包含了许多可绘制对象和动画。问题是，当我将主项目导出为 .apk 时，它包括所有可绘制对象和动画，甚至是主项目中未使用的对象。
导出/导入后Mysql时间卡住
我的一个 mysql 用户以这种方式耗尽了他的生产数据库: 他将所有数据导出到转储文件，然后删除所有内容，然后将数据导入回数据库。他从 Innodb 大表空间中保存了一些 Gig(我不知道他为什么这样
Pimcore 导入/导出
我正在 pimcore 中创建一个新站点。有没有办法导出/导入 pimcore 站点的完整数据，以便我可以导出 xml/csv 格式的 pimcore 数据进行必要的更改，然后将其导入回来？最佳答案
静态函数的 DLL 导出
我有以下静态函数: static inline HandVal StdDeck_StdRules_EVAL_N( StdDeck_CardMask cards, int n
找不到 TypeScript 导出
因为我更新了 angular cli 和 nestjs 版本，所以我收到了数百条警告，提示我无法找到我的自定义类型定义和接口(interface)。但是我的nestjs api仍然可以正常工作。我正
Eclipse - 导出/保存搜索结果
Eclipse 的搜索结果 View 以其树状结构非常方便。有没有办法将这些结果导出为可读的文本格式或将它们保存到文件中以备后用？我试过使用复制和粘贴，但生成的文本格式远不可读。最佳答案不，我认
javascript - 我如何在React中选择导入/导出
我想在用户在 Chrome 中打开页面时使用 WebP否则它应该是 png。我找到了这段代码: var isChrome = !!window.chrome && !!window.chrome.w
azure - 用户上次登录 - 导出
您好，我正在尝试根据“上次登录”导出 AD 用户列表我已经使用基本 powershell 编写了脚本，但是如果有人可以使用“AzureAD 到 Powershell” 命令找到解决方案，我会很感兴趣
amcharts - 导出 AM 股票图表
有没有办法启用 Stockchart 的导出？我知道这对于普通图表是可行的，但对于股票图表，当尝试启用导出模式时，我得到了未定义，我尝试过:chart.export.enabled=true;和ch
Magento 订单导入/导出
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
Oracle 使用命令行导入/导出
我正在尝试学习如何使用命令行将数据导入/导出到 Oracle。根据我的发现，看起来我应该使用 sqlldr.exe 文件来导入和导出，但我不确定除了 userid 之外还需要什么参数。谁能给我解释一下
azure - 用户上次登录 - 导出
您好，我正在尝试根据“上次登录”导出 AD 用户列表我已经使用基本 powershell 编写了脚本，但是如果有人可以使用“AzureAD 到 Powershell” 命令找到解决方案，我会很感兴趣
Django pdf 导出
我想生成一个 PDF，它将以表格格式显示查询集的输出，例如: query = ModelA.objects.filter(p_id=100) class ModelA(models.Model):
Java2Word 导出，单独格式化表格单元格
我有一个数据库代理，可以从 IBM Notes 数据生成 Word 文档。我正在使用 Java2Word API 来实现此目的，但不幸的是，该 API 几乎没有文档，而且我找不到任何有关表格格式(大小
Java 导出 - 文本文件
我尝试将 Java 程序从 Eclipse 导出到 .jar 文件，但遇到了问题。它运行良好，但由于某种原因它没有找到它应该从中获取数据的文本文件。如果有人能帮忙解决这个问题，我将非常感激。最佳答案
Oracle 使用命令行导入/导出
我正在尝试学习如何使用命令行将数据导入/导出到 Oracle。根据我的发现，看起来我应该使用 sqlldr.exe 文件来导入和导出，但我不确定除了 userid 之外还需要什么参数。谁能给我解释一下
clang - 在Web程序集中生成内存和表导入/导出
使用LLVM / Clang编译到WebAssembly的默认代码生成将导出内存，并完全忽略表。使用clang（--target=wasm32-unknown-unknown-wasm）定位Web组
Oracle DDL 导出
我正在尝试在 HSQL 数据库中重新创建一个 oracle 数据库。这是为了在本地开发人员系统上进行更好的单元测试。我需要知道的是，是否有任何我可以在 oracle 服务器/客户端中使用的工具/命

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 将谷歌地图API圈导出到kml