javascript - Google Maps API V3 读取 KML 文件-6ren

javascript - Google Maps API V3 读取 KML 文件

转载作者：行者123 更新时间：2023-11-30 18:27:22

我正在使用 KML Example 作为读取包含多边形的 KML 文件的指南。 kml文件包含

    <?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
  <name>Neighborhood Groups</name>
  <description><![CDATA[Content]]></description>
  <Style id="style3">
  </Style>
  <Style id="style9">
  </Style>
  <Style id="style8">
  </Style>
  <Style id="style2">
  </Style>
  <Style id="style4">
  </Style>
  <Style id="style7">
  </Style>
  <Style id="style1">
  </Style>
  <Style id="style5">
  </Style>
  <Style id="style6">
  </Style>
  <Style id="style10">
  </Style>
  <Placemark>
    <name>Neighborhood Group 1</name>
    <styleUrl>#style3</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.087296,35.911472,0.000000
            -84.089699,35.909248,0.000000
            -84.089439,35.903618,0.000000
            -84.085625,35.898994,0.000000
            -84.075836,35.903721,0.000000
            -84.081757,35.912968,0.000000
            -84.083565,35.919537,0.000000
            -84.090385,35.918110,0.000000
            -84.087250,35.911507,0.000000
            -84.090385,35.918110,0.000000
            -84.083473,35.919640,0.000000
            -84.087296,35.911472,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 2</name>
    <styleUrl>#style9</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.089439,35.902992,0.000000
            -84.089569,35.902992,0.000000
            -84.089615,35.902954,0.000000
            -84.093178,35.901428,0.000000
            -84.096741,35.900002,0.000000
            -84.097122,35.898819,0.000000
            -84.098969,35.897324,0.000000
            -84.112183,35.891346,0.000000
            -84.102013,35.885120,0.000000
            -84.089699,35.888771,0.000000
            -84.086739,35.892563,0.000000
            -84.082275,35.894367,0.000000
            -84.080429,35.894543,0.000000
            -84.087059,35.899845,0.000000
            -84.089401,35.903061,0.000000
            -84.089439,35.902992,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 3</name>
    <styleUrl>#style8</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.094109,35.910252,0.000000
            -84.094551,35.910252,0.000000
            -84.101067,35.909031,0.000000
            -84.096008,35.904068,0.000000
            -84.105103,35.901699,0.000000
            -84.104927,35.899651,0.000000
            -84.102867,35.895691,0.000000
            -84.097977,35.898022,0.000000
            -84.096992,35.899681,0.000000
            -84.095833,35.900730,0.000000
            -84.093681,35.906811,0.000000
            -84.094109,35.910252,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 4</name>
    <styleUrl>#style2</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.101196,35.908970,0.000000
            -84.101418,35.908901,0.000000
            -84.106911,35.907337,0.000000
            -84.113258,35.904381,0.000000
            -84.116608,35.903618,0.000000
            -84.116348,35.901497,0.000000
            -84.116905,35.899826,0.000000
            -84.116394,35.897915,0.000000
            -84.114418,35.893120,0.000000
            -84.111504,35.890961,0.000000
            -84.103905,35.896385,0.000000
            -84.104889,35.899548,0.000000
            -84.105324,35.900383,0.000000
            -84.100731,35.903755,0.000000
            -84.101196,35.908970,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 5</name>
    <Snippet>sdfgsdfg</Snippet>
    <description><![CDATA[<div dir="ltr">sdfgsdfg</div>]]></description>
    <styleUrl>#style4</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.094238,35.941559,0.000000
            -84.096649,35.944000,0.000000
            -84.100082,35.945660,0.000000
            -84.105621,35.945702,0.000000
            -84.111618,35.945660,0.000000
            -84.113251,35.943161,0.000000
            -84.113770,35.939030,0.000000
            -84.109177,35.940590,0.000000
            -84.110039,35.927589,0.000000
            -84.105789,35.925468,0.000000
            -84.094238,35.924358,0.000000
            -84.095360,35.930439,0.000000
            -84.094238,35.941559,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 6</name>
    <styleUrl>#style7</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.102272,35.946110,0.000000
            -84.101959,35.946110,0.000000
            -84.100342,35.945911,0.000000
            -84.096512,35.943981,0.000000
            -84.094070,35.941422,0.000000
            -84.094582,35.938961,0.000000
            -84.144463,35.913799,0.000000
            -84.094490,35.927872,0.000000
            -84.093773,35.924252,0.000000
            -84.090210,35.918522,0.000000
            -84.074852,35.921921,0.000000
            -84.079170,35.936520,0.000000
            -84.080971,35.941551,0.000000
            -84.081749,35.943130,0.000000
            -84.081413,35.945061,0.000000
            -84.082520,35.947472,0.000000
            -84.085609,35.949211,0.000000
            -84.092651,35.953411,0.000000
            -84.100029,35.949070,0.000000
            -84.102272,35.946110,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 7</name>
    <styleUrl>#style1</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.082008,35.944618,0.000000
            -84.081757,35.943512,0.000000
            -84.079140,35.936489,0.000000
            -84.079391,35.934158,0.000000
            -84.076088,35.921650,0.000000
            -84.059013,35.925400,0.000000
            -84.059097,35.928532,0.000000
            -84.062569,35.931278,0.000000
            -84.062920,35.932812,0.000000
            -84.060249,35.937119,0.000000
            -84.059608,35.939690,0.000000
            -84.060768,35.941841,0.000000
            -84.064552,35.943130,0.000000
            -84.074333,35.944691,0.000000
            -84.078712,35.945660,0.000000
            -84.082008,35.944618,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 8</name>
    <styleUrl>#style5</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.079613,35.913628,0.000000
            -84.074722,35.906986,0.000000
            -84.065323,35.911575,0.000000
            -84.063797,35.911873,0.000000
            -84.061096,35.912186,0.000000
            -84.062019,35.922176,0.000000
            -84.065582,35.923531,0.000000
            -84.077080,35.920891,0.000000
            -84.079315,35.914322,0.000000
            -84.079613,35.913628,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 9</name>
    <styleUrl>#style6</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.074425,35.906693,0.000000
            -84.074638,35.906605,0.000000
            -84.077042,35.905910,0.000000
            -84.072319,35.899166,0.000000
            -84.068626,35.894058,0.000000
            -84.067337,35.890911,0.000000
            -84.060234,35.892754,0.000000
            -84.056396,35.894283,0.000000
            -84.052963,35.894909,0.000000
            -84.055069,35.899513,0.000000
            -84.058434,35.899132,0.000000
            -84.060387,35.902954,0.000000
            -84.061722,35.905807,0.000000
            -84.064934,35.910309,0.000000
            -84.065582,35.911331,0.000000
            -84.074425,35.906693,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
  <Placemark>
    <name>Neighborhood Group 17</name>
    <styleUrl>#style10</styleUrl>
    <Polygon>
      <outerBoundaryIs>
        <LinearRing>
          <tessellate>1</tessellate>
          <coordinates>
            -84.061737,35.913246,0.000000
            -84.061844,35.913002,0.000000
            -84.063606,35.911995,0.000000
            -84.063690,35.910950,0.000000
            -84.064682,35.910221,0.000000
            -84.061028,35.902817,0.000000
            -84.057938,35.898716,0.000000
            -84.052574,35.900906,0.000000
            -84.047256,35.904797,0.000000
            -84.048134,35.905632,0.000000
            -84.047424,35.906815,0.000000
            -84.047966,35.911194,0.000000
            -84.048264,35.912777,0.000000
            -84.050819,35.913334,0.000000
            -84.051201,35.914669,0.000000
            -84.052490,35.918163,0.000000
            -84.052490,35.921429,0.000000
            -84.057083,35.920597,0.000000
            -84.059204,35.918682,0.000000
            -84.061737,35.913246,0.000000
          </coordinates>
        </LinearRing>
      </outerBoundaryIs>
    </Polygon>
  </Placemark>
</Document>
</kml>

处理它的javascript是

function initialize() {
  var myLatlng = new google.maps.LatLng(35.910200,-84.085100);
  var myOptions = {
    zoom: 12,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(
      document.getElementById("map_canvas"),
      myOptions);

  var nyLayer = new google.maps.KmlLayer(
      'map.kml',
      {  suppressInfoWindows: true,
         map: map});


  google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    var sidediv = document.getElementById('content_window');
    sidediv.innerHTML = text;
  }
}

正在进行的全部工作在 http://cspc.net/neighborhoods/map.html 。如您所见， map 不会完成加载。正在从在 maps.google.com 中创建的自定义 map 导出 kml 文件。

我需要修改 kml 文件吗？

最佳答案

问题出在 KmlLayer ^doc构造函数调用。您必须提供一个可公开访问的 URL，Google 可以从中检索您的 kml 文件。 Google 处理您的 kml，将其转换为叠加图 block ，然后将其作为您使用 new google.maps.KmlLayer(...) 创建的 KmlLayer 返回。

关于javascript - Google Maps API V3 读取 KML 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10501104/

文章推荐： c# - 如何检测windows phone是否插入了windows 7电脑？

文章推荐： c# - 如何用dapper解析Sql Script？ (设置 PARSEONLY ON + Dapper)

文章推荐：用于大字符串的 Javascript 语法高亮器

Python:Pandas 读取 csv:读取 csv 时向下转换
我遇到以下问题。我想读取一个包含数百万行和数百列的大型 csv。我想向下转换列的数据类型。我的方法是读取 csv，然后使用 pd.to_numeric() 对其进行向下转换。我不知道列数及其类型。在读
c# - 从 SQL Server 读取 - 需要从 CSV 读取
目前，我从 SQL server (2008) 数据库获取数据。 cyurrent的方法是使用DataTable，然后将其传递并使用。 if (parameters != null)
python - Dask 读取 csv 与 pandas 读取 csv
我有以下问题。我有一个巨大的 csv 文件，想用多处理加载它。对于一个包含 500000 行和 130 列不同数据类型的示例文件，Pandas 需要 19 秒。我试过 dask 因为我想多处理阅读。但
java - 读取 VC++ CArchive 二进制格式(或 Java 读取 (CObArray))
是否有关于用于序列化各种 MFC 数据结构的二进制格式的明确文档？我已经能够在十六进制编辑器中查看我自己的一些类，并使用 Java 的 ByteBuffer 类读取它们(使用自动字节顺序转换等)。但
javascript - 是否可以使用 javascript 读取 something.properties ？ (在 .hta 文件中)>> 读取 Selenium
我正在使用 Selenium 进行测试，我们用 HTML 文件编写测试用例，并用它们制作测试套件，我们的要求是编写足够健壮的测试用例，以根据测试环境改变自身。为此，我不希望在 HTML 脚本本身中包
读取.txt文件的Javascript代码
我需要一个 JavaScript 代码来读取存储为 .txt 文件的字典(或者也可以保存为任何其他类型的文件。它也可以在线获得)并将其内容存储在一个变量中。我不能找到一种让 JavaScript 像
java - 读取/过滤文本文件的最快方法是什么
我正在尝试遍历包含 SSH 登录和其他日志的日志文本文件。程序正在返回 SSH 登录的总数。我的解决方案确实有效，但似乎有点慢(在 200mo 文件上大约需要 3.5 秒)。我想知道是否有任何方法
vba - 读取/写入大量数据
我正在将大量数据从一个电子表格复制到工作簿中的其他 160 个电子表格。目前，Excel (2013) 遇到错误，因为它没有足够的资源来完成操作。我的目标是将工作表 4 中 V13:XI1150 范
VBA 读取/搜索文本文件
我正在尝试读取一个有 1147 行的文本文件。下面的代码仅读取第 1050-1147 行。我的目标是读取整个文件并提取位于不同行的特定值以在脚本中使用。一个示例是包含“BlockList: 2”的行中
Prolog 用户输入的时间限制(读取)
我正在为游戏编写解释器。用户将其移动输入解释器，程序执行该移动。现在我想为每个决定实现一个时间限制。玩家不应该能够思考超过 30 秒来写一个移动并按下回车。 call_with_time_limit
读取 HITRAN 文件格式
以this file例如，我正在尝试读取 data.frame 中的数据。来自 the doc (pdf 文件，表 1)，它遵循一些 fortran 约定。我尝试了以下但收效甚微: dir 0' 将
读取 R 的电子邮件附件
我正在使用 R 阅读 Outlook 附件。我的引用在这里:Download attachment from an outlook email using R 这是我的电子邮件的截图: 这每天都会发送
php xmlrpc 读取
我不会从表格中读取行来将主题放在列表中 php脚本 $url_obj='http://'.$host.':8069/xmlrpc/object'; $sock=new xmlrpc_client($u
读取 csv 但跳过字符串中的转义逗号
我有一个这样的 csv 文件: id,name,value 1,peter,5 2,peter\,paul,3 我如何读取此文件并告诉 R "\," 不表示新列，仅表示 ","。我必须添加该文件
macos - 读取 plist
我正在尝试读取 ~/Library/Preferences/com.apple.mail.plist (在 Snow Leopard 上)以获取电子邮件地址和其他信息以进入“关于”对话框。我使用以下代
bash - 读取 float
This question already has answers here: How do I use floating-point division in bash? (19个回答) 5个月前关闭
COBOL 读取/存储在表中
本练习的目标是读取输入文件并将其存储到表中，然后验证输入中的某些字段并输出任何错误记录。我需要读取并存储每个策略组，以便表中一次仅存储 5 条记录，而不是整个文件。所以我需要读取一个包含 5 条记录
Cassandra LWT 读取
据我了解，LWT 插入始终以 SERIAL 一致性级别完成。如果为 true，这是否意味着读取作为 LWT 插入的行可以安全地以 ANY 的一致性级别读取？换句话说，我假设 LWT 插入是完全一致的
JavaScript:读取 cookie
我看到很多很多通过java脚本读取cookie的函数，但我只想在变量中使用它一次，我是JS新手。这是我的代码 var TheNumber = (Math.random() + '') * 10000
c# - 读取.net中的程序集
我正在使用 asp.net 和 C#。我在服务器上部署了一个应用程序[已发布]，现在我想查看该网站的代码，据我所知，我可以阅读程序集来查看代码。请告诉我如何实现它。提前致谢。最佳答案您可以使用

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Google Maps API V3 读取 KML 文件